This is an advanced tutorial and is not supported by Shogun. Knowledge of HTML and CSS is required.
Table of Contents
Feature Introduction
Adding custom fonts to your Shopify theme can be a great method of creating a unique look and feel for your site. In this tutorial, we will be going through the steps on how to add a custom font to Shopify, and then onto adding it into Shogun for use with your Shogun pages.
Check out our blog article on editing and customizing fonts on Shopify: The Guide to Shopify Fonts: How to Edit & Customize Fonts on Shopify
Uploading your font
To get started, you will first need to upload the font file to the Files section of your Shopify dashboard.
To get to the Files folder, navigate to your Shopify dashboard. From here, go to: Content > Files
Once on the Files page, the prompt to 'Upload files' should automatically open
Installing your font in your theme
Next up: We want to add a font face to the theme that pulls the file in that contains the typeset added to Shopify.
Go to your theme's main CSS file (usually named styles.scss.liquid, theme.scss.liquid, or another variation of this). This file can be found in the Assets folder of your theme:
Navigate to the bottom of this file to add new code into your theme, ading the code below, replacing highlighted elements of the code with actual data.
Font name > the name of the font, if the font has more than one word in its name it will need "quotation marks" - these will also be needed when inserting into Shogun.
Filename > the name of the file that was just uploaded to Shopify in the Files section, including the file extension, for example, cosmic_sans_bold.ttf.
Format > the format of the font that was uploaded, for example, for Athena.ttf this would be "TrueType".
@font-face {
font-family: "Font name";
src: url({{ "Filename" | asset_url }}) format("Format");
}
Available font formats: "woff", "woff2", "truetype", "opentype", "embedded-opentype" and "svg".
Adding your font to Shogun
Once your font has been added to your files and theme, you can take the Font-Name for the given font-family value and add it to your settings field which can be found on your Shogun dashboard. More information can be found in the article below.