Custom Fonts

Overview

All themes have supported fonts that you can easily add to your storefront by going to Theme settings > Typography.

However, if you would like to use a font on your storefront that does not exist already within your theme's Typography settings, you can upload custom fonts to the theme.

❓Which font file types should I use?

🌟 In order 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

Example: You want to use the custom font Moderat Regular on your store. You upload the following font files as assets into your theme's code: - moderat-regular.eof - moderat-regular.woff - moderat-regular.ttf - moderat-regular.svg

Uploading Font Files

To upload a new font file, you must add a new asset to your theme's code.

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

Locating your code editor in order to upload your custom fonts.

Adding a New Asset

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.

Uploading your fonts as an asset within your code.

Reference the files in your theme stylesheet

Now the fonts are included in your theme, we need to bring them into the stylesheet, so they can be used.

Open your stylesheet:

  1. Your Flow theme

  2. Actions

  3. Edit code

  4. Assets

  5. timber.scss.liquid / theme.scss.liquid / custom.css (this can vary, based on the theme version, but all the files serve the same purpose)

In a fresh line at the bottom of the file, add the following code, replacing the 'Font' label with your font name and file-names:

@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");
}

Integrate into your store

Now the fonts are uploaded, and the files referenced, we can include the fonts in our store.

If you wanted all headers throughout your site to change to the new font, you could add the following:

h1, h2, h3, h4, h5, h6{
font-family: "Font";
}

Changing the 'font' name to the name set when adding the assets.

Please note:

By Shopify Request, we do not offer custom coding assistance at WeTheme Support - this includes direct assistance with the placement of the coding discussed above. If you're struggling to complete the needed code changes alone, please consider reaching out to the Experts discussed below:

Alternative Solutions

Shopify also has a complete guide to using fonts on their platform:

Our developers have advised that the one wrinkle in this solution is if the font falls under the Adobe Fonts/Typekit umbrella. The best approach in this instance instead would be to reach out directly to Adobe Support:

Additionally, for Google Fonts, please see the below:

or contact the Google Design team directly:

[email protected] For additional assistance with implementing customisations, we can highly recommend a number of trusted specialists, all of which are grouped for your convenience under our help guide: