How to Upload a Custom Font

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 files 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.

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.

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

  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.

Still need help?

Email our friendly support team with your query: [email protected].

So that we can best help, please ensure you provide key details including:

  • What your query is about

  • Which theme you are using

  • Your URL

  • Your password (if the shop is locked for visiting customers)

  • Any screenshots that may help us resolve your query as quickly as possible.