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.


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:

WeTheme Custom Coding and Shopify App Integration Reference Guide.

Flow - assets/timber.scss.liquid
Envy - assets/style.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:

https://developers.google.com/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:

WeTheme Recommended Specialists Reference Guide

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.