Shopify store custom font surprise

When customizing a Shopify store project, I ran across a quirk using custom fonts that I’m sharing with you here. This post is little more technical than typical, but sometimes you run across something so unusual that you feel the need share about it to help other people who will inevitably run into a similar problem!

One of my goals is to help you save time. This problem kept me up at night, and it took days to figure out what was wrong. My hope is that putting this out there will help anyone searching online for similar answers.

Basically, if you have custom font files that include hyphens in the font name, your custom font won’t work correctly in Shopify. This little quirk does not appear to be in the Shopify documentation or tutorials. It’s also likely the problem extends to using any non-alphanumeric characters in your custom font name.

The @font-face css looked something like this:

@font-face {    
font-family: ‘brandon-grotesque’;    

src: url(‘ {{ ‘brandon-grotesque.eot’ | asset_url }} ‘);    

src: url(‘ {{ ‘brandon-grotesque.eot?#iefix’ | asset_url }} ‘) format(’embedded-opentype’),    

url(‘ {{ ‘brandon-grotesque.woff’ | asset_url }} ‘) format(‘woff’),

url(‘ {{ ‘brandon-grotesque.woff2’ | asset_url }} ‘) format(‘woff2’),     

url(‘ {{ ‘brandon-grotesque.ttf’ | asset_url }} ‘) format(‘truetype’),    

url(‘ {{ ‘brandon-grotesque.svg#brandongrotesque’ | asset_url }} ‘) format(‘svg’);    

font-weight: normal;    
font-style: normal; 
}

To get the custom fonts to load and appear as they should, remove all non-alphanumerics from the font file names and the styles.scss.liquid file inside the Shopify theme’s assets folder.

In my case, this meant removing the hyphens from the file names and css statements.

So @font-face css changed to something like this:

@font-face {    
font-family: ‘brandongrotesque’;    

src: url(‘ {{ ‘brandongrotesque.eot’ | asset_url }} ‘);    

src: url(‘ {{ ‘brandongrotesque.eot?#iefix’ | asset_url }} ‘) format(’embedded-opentype’),    

url(‘ {{ ‘brandongrotesque.woff2’ | asset_url }} ‘) format(‘woff’),    

url(‘ {{ ‘brandongrotesque.woff’ | asset_url }} ‘) format(‘woff2’),    

url(‘ {{ ‘brandongrotesque.ttf’ | asset_url }} ‘) format(‘truetype’),    

url(‘ {{ ‘brandongrotesque.svg#brandongrotesque’ | asset_url }} ‘) format(‘svg’);    

font-weight: normal;    
font-style: normal; 
}

If this helped you with your project, it would be great to hear from you in the comments.

For more help customizing your Shopify emails or other projects, shoot me an email: dividenddesign@gmail.com.

Leave a Reply

Your email address will not be published. Required fields are marked *