What is the correct way to implement Shopify font using font_picker?

Solved
Highlighted
Tourist
9 2 3

I have previously utilized the font_picker with success in previous themes. I am now customizing a theme from scratch for myself and following the same guidelines and implementation I have previously used except none of the fonts are displaying correctly, with the exception of a couple simple fonts such as "Quicksand".

Here is a simple example of how I am attempting to utilize the font_picker.

Stylesheet

 

{% assign primary_font = settings.primary_font %}
{{ primary_font | font_face }}

.primary-font {
   font-family: {{ primary_font.family }}, {{ primary_font.fallback_families }};
}

 

HTML

 

<h1 class="primary-font">Hello World</h1>

 

 

The font weight and style are being applied but the actual font itself is not updating to the correct font selected through the font_picker. For some reason 'Quicksand' seems to be working fine but all of the rest of the fonts don't seem to be working for me.

It looks like liquid is successfully formatting the font face. This snippet was taken from the networking tab in my browser (Firefox) which shows the font face correctly formatted with valid Shopify CDN urls to the fonts.

 

@font-face {
  font-family: Quicksand;
  font-weight: 400;
  font-style: normal;
  src: url("https://fonts.shopifycdn.com/quicksand/quicksand_n4.d095c6a3084955552d078cb5ddbfcacb66ded7c7.woff2?&hmac=65eb56d90173fd41d0a86a889262dcca9d5f005a6c507ba94157cbd1f14a7cfa") format("woff2"),
       url("https://fonts.shopifycdn.com/quicksand/quicksand_n4.fdcb207dc7752a043253c4181978b51d0ce29865.woff?&hmac=c106a5cfd1a530b93f5c671af15668846c40cc185eefb2e8ea9a3f7b86a3f814") format("woff");
}

@font-face {
  font-family: Montserrat;
  font-weight: 700;
  font-style: normal;
  src: url("https://fonts.shopifycdn.com/montserrat/montserrat_n7.c496e9cf2031deec4c4bca338faa81971c8631d4.woff2?&hmac=b9a918bf2f468523f460d46c1177ce19f91e4e2d2e985e9790e19f7a38d94a90") format("woff2"),
       url("https://fonts.shopifycdn.com/montserrat/montserrat_n7.78b0223375c94b39ce1af7e09a0225f2bb3d05f7.woff?&hmac=8239ed8fbc7d038e4f5187456563d0dfae3f53b3737d96c3d6b510d70dafb13d") format("woff");
}

@font-face {
  font-family: Kalam;
  font-weight: 400;
  font-style: normal;
  src: url("https://fonts.shopifycdn.com/kalam/kalam_n4.2b80162f092311b7a7cd5b42e11d18fc61670668.woff2?&hmac=8da913cbea215dd00e3ec8ec09f13dce953d56aef2a4ade923e98b1c5f35694c") format("woff2"),
       url("https://fonts.shopifycdn.com/kalam/kalam_n4.d467feca92c9e3e3da81ce9b16785be735970426.woff?&hmac=bc5a3aab5a4a042c8b76f34d062f75ebe76764f8ea67ea5ea92068f6ec66e159") format("woff");
}

 

 

If I am doing something wrong please let me know and / or if you have any code samples / articles to demonstrate the proper implementation I would be grateful.

EDIT: It looks like for whatever reason the primary font is failing and falling back to the fallback_families font. I figured that out using the font tab in devtools for Firefox. Still doesn't explain why the original font is failing, especially since the at font-face seems to be correctly applied.

0 Likes
Highlighted
Tourist
9 2 3

This is an accepted solution.

Figured it out.

I neglected to mention I am using tailwindcss as part of our theme development the order in which we load css modules was causing the issue. For anyone using tailwindcss or similar framework, here is the rough load order for your modules.

  1. Reset document
  2. Import font-face rules here. Use Shopify's liquid format (eg. {{ settings.primary_font | font_face }} )
  3. Import your css variables (I am using css native custom variables but SASS is also an option)
  4. Rest of your utilities/components/custom code afterwards

If anyone is interested in the tailwindcss implementation feel free to reach out. I will likely do a simple write up on it later since I have learned a few hard lessons along the way.

0 Likes