This is an advanced tutorial and is not supported by Shogun. Knowledge of HTML and CSS is required.

Adding custom fonts to your Shopify theme can be a great method of creating a unique look and feel to your site. In this tutorial, we will be going through the steps on how to add a Shopify font to your theme, and then onto adding it into Shogun for use with your Shogun pages.

Uploading your font

To get started, you will first need to upload the font into the Assets folder of your theme.

  1. To get to the Assets folder of your theme, navigate to your Shopify dashboard. From here, go to: Online Store > Actions > Edit Code
  2. Scroll down till you find the Assets folder and click add a new asset, select your font file and hit upload asset.

Installing your font in your theme

Next up: telling your theme that it can use the font file that you have uploaded.

  1. 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.
  2. Add the code below, replacing highlighted elements of the code with actual data.
    Font name > the name of the font inside of quotation marks
    Filename > the name of the file that was just uploaded to your theme including the file extension, for example, Athena.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 theme has been added to your theme, you can take the Font-Name that we added above and add it into your settings that can be found on your Shogun dashboard. More information can be found in the article below.

Did this answer your question?