Custom Fonts

Upload the font file assets

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:

  1. Admin

  2. Online Store

  3. Envy

  4. Actions

  5. Edit code

  6. Assets

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

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:

Envy → Assets → style.scss.liquid / theme.scss.liquid

and at the bottom, add the following code and edit out the 'font' reference for that of your new font:

@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/Typekit umbrella. The best approach in this instance instead would be to reach out directly to Adobe Fonts Support:

Additionally, for Google Fonts, please see the below:

or contact the Google Design team directly: 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: