Welcome to the Eight Themes Docs

Search

How to upload custom fonts

Warning: This guide follows a code customisation process and therefore does not fall under the scope of our support team. If you have any issues implementing these code changes, our support team won't be able to offer guidance. 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 a custom font in all four of the following files types:

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

Step 2: Open the code editor

 
  1. Within your Shopify admin, go to Online Store > Themes.
  2. Go to the live theme.
  3. Click Actions > Edit code.

a-8.png

Step 3: Upload font files

 

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

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

blobid1.png

Step 4: Reference the files in the 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 is called:

  • 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 paste the code snippet below.
  3. Replace the Font label with your font name.
  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 the storefront

 

Now that your font files have been uploaded and referenced in the theme's stylesheet, you can use this font in your theme's code as you wish.

Note: As your uploaded font files are not native to the theme, the 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?