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

Please navigate to:

  1. Admin

  2. Online Store

  3. Flow

  4. Actions

  5. Edit code

  6. Assets

  7. Use the 'Add a new asset option' here:

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:

  1. Your Flow theme

  2. Actions

  3. Edit code

  4. Assets

  5. timber.scss.liquid

and at the bottom, 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.

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:

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: