Welcome to the Eight Themes Docs

Search

How to Upload Custom Fonts

Warning: This guide follows a code customization process, and therefore does not fall under the scope of our support team. If you have any issues implementing these code changes, please seek an expert's help.

Step 1: Compile Your Font Files

 

To ensure that your font is correctly displayed regardless of which browser your customers are using, we recommend uploading your custom font in all four of the following file types:

  • .eot
  • .woff
  • .ttf
  • .svg

Step 2: Locate Your Code Editor

 
  1. Within your Shopify admin, go to Online Store > Themes.
  2. Go to the theme you are working with.
  3. Click Actions, and select Edit code from the drop-down menu.

 

Screen_Shot_2022-05-11_at_9.52.48_AM.png

Step 3: Add the Font Files as Assets

 

Once you have opened your code editor, you can then upload your font as a new asset.

  1. Within your theme code editor, open Assets.
  2. Select Add a new asset.
  3. Click Choose file, and select a font file to upload.
  4. Select Upload asset.

Screen_Shot_2022-05-11_at_10.31.37_AM.png

Step 4: Reference the Files in Your Stylesheet

 

The title of your theme's stylesheet varies based on which version of the theme you have - it exists within your Assets folder, and will be named one of the following options:

 

  • timber.scss.liquid
  • theme.scss.liquid
  • custom.css

 

Reference these files in your stylesheet by following the instructions below:

 

  1. Under Assets, locate your stylesheet.
  2. Find an empty line and add the code snippet below.
  3. Replace the "Font" label with your font title.
  4. Replace the placeholder font files with the names of your font files.
 
@font-face { 

 font-family: "Font"; 

 src: url('{{ "font.eot" | asset_url }}'); 

 src: url('{{ "font.eot" | asset_url }} ?#iefix') format("embedded-opentype"),

 url('{{ "font.woff" | asset_url }}') format("woff"), 

 url('{{ "font.ttf" | asset_url }}') format("truetype"), 

 url('{{ "font.svg" | asset_url }} #myfont') format("svg"); 

}

Step 5: Integrate the Font into Your Storefront

 

Now that your font files have been uploaded and referenced within your theme's stylesheet, you can implement this font into your theme's code as you wish.

 

Note: As your uploaded font files are not native to the theme, your custom font will not appear within your Typography settings. If you wish to apply your custom font to your storefront, you must add this to your theme's stylesheet manually.
Warning: This guide follows a code customization process, and therefore does not fall under the scope of our support team. If you have any issues implementing these code changes, please seek an expert's help.

Was this article helpful?