Custom Fonts

Each theme has supported fonts that you can choose from inside the Typography settings, however uploading custom fonts that are not part of the default theme, can be achieved by following this guide.

Uploading Font Files

Using the Shopify settings, click files:

From here, you can upload your files to your asset folder, using the button highlighted "Upload files":

You'll then be provided with a URL to reference in your CSS file. Take note of this separately, as it will be needed.

Font File Types

Ideally, for each font you would have 4 font files:

  • .eot

  • .woff

  • .ttf

  • .svg

We recommend using all of these where possible to ensure cross-browser compatibility.

These need to be uploaded into the 'assets' folder of your theme.

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:

Flow - assets/timber.scss.liquid

and at the bottom, add the following code:

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

Alternative Solutions

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

Shopify Help - Fonts guide.

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

Google Developers - Fonts FAQ

or contact the Google Design team directly:

design@google.com 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: