Preloading fonts (before css stylesheet) to improve rendering

Hi,

I'm looking to preload the font I use (Roboto from shopify library) in order to improve the first paint, aka first rendering view. I noticed the font is kind of "flashing" for a quick moment (only for first time customer and first page load, then it's cached in the borwser), and this can be solved with something called preload to insert in the header. 

Something like <link rel=preload" href="???"> But I'm stuck here. I don't know how to load the proper font I use, neither do I know where they are stored. I'm also looking to change the fontawesome library that I use, but I have no idea where it is although I can see where it loads from in the google dev toll.

Can anyone help on this ? I'musing Venture theme by the way.

Regards

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
Shopify Partner
1838 173 601

Hi Max,

Unless you use any other CDN (which you can) to serve web fonts, Shopify's CDN that also caches the fonts isn't really accessed directly but via Liquid font filters in this particular case.

So if you need a partucular font's URI, you can

// defaults to woff2
{{ settings.body_font | font_url }}

// or if you want a specific format
{{ settings.body_font | font_url: 'woff' }}

As for preloading, I suggest you read and follow instructions from this article.

As for the flash of text, you are experiencing either FOIT (Flash Of Invisible Text) or FOUF / FOUC (Flash Of Unstyled Text / Content) - in your case I assume latter. Simple JS / CSS techniques to mitigate this phenomenon have been documented and written about many times over on the web as far back as very early 2000's - pick your potion.

Hope this helps and happy NYE!

I turn coffee in to code - since 1998
0 Likes

Hi Karl,

Thanks hips and happy new year too ! Altough I didn't achieve anything yet.

What I experience is FOIT. It looks like text is loading with some delay, it's quick but noticable. 

I've been over the internet for this too, but as a newbie and relying mostly on shopify, I'm asking the community because it has not been discussed here in the forum.

So I've added this piece of code in the theme.liquid header :

<link rel="preload" href="/fonts/awesome-l.woff2" as="font">

and I added this piece of code in the theme.scss file :

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2'), /* will be preloaded */ 
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('truetype'),
       url('/fonts/awesome-l.eot') format('embedded-opentype');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

But nothing worked. In the google dev tool I see it "fails to load response data". Sure enough I do it wrong, and I guess it has to do with the url.

I would welcome some more help and this would make the topic more "user friendly" for those who have little code knowledge but still desire to do the job. 

Regards

Edit :

I can see on the inspector tool, the theme.scss.css is the second file to be downloaded, and right on top of it I can see that (if it may help..) . But I can't see those lines of code in my css file though : 
 

@font-face {
    font-family: "FF Unit Rounded";
    font-weight: 400;
    font-style: normal;
    src: url("https://fonts.shopifycdn.com/ff_unit_rounded/ffunitrounded_n4.f8272f5d7e052679ecba16c7371d094d4d2b2d...") format("woff2"),url("https://fonts.shopifycdn.com/ff_unit_rounded/ffunitrounded_n4.c98cfa667286a40823a62650730732c8fd3f20...") format("woff")
}

@font-face {
    font-family: Cabin;
    font-weight: 400;
    font-style: normal;
    src: url("https://fonts.shopifycdn.com/cabin/cabin_n4.90cfc8efed7ff88f02d58b22d38933ec75887560.woff2?h1=emFkZW...") format("woff2"),url("https://fonts.shopifycdn.com/cabin/cabin_n4.9f337ab91288ce417d0a6abd954e1d9f876868b7.woff?h1=emFkZWt...") format("woff")
}

@font-face {
    font-family: Cabin;
    font-weight: 700;
    font-style: normal;
    src: url("https://fonts.shopifycdn.com/cabin/cabin_n7.3703a1f5733b06a58cf91470aca19cfd07978070.woff2?h1=emFkZW...") format("woff2"),url("https://fonts.shopifycdn.com/cabin/cabin_n7.a7351ebf59c46b409ece4ca0912c23a7c55df1ed.woff?h1=emFkZWt...") format("woff")
}

@font-face {
    font-family: Cabin;
    font-weight: 400;
    font-style: italic;
    src: url("https://fonts.shopifycdn.com/cabin/cabin_i4.d842691f340f784c85693accd3cc7aaa6af9102a.woff2?h1=emFkZW...") format("woff2"),url("https://fonts.shopifycdn.com/cabin/cabin_i4.410154aaffb1849b1cbebd17c230958bfb5a02af.woff?h1=emFkZWt...") format("woff")
}

@font-face {
    font-family: Cabin;
    font-weight: 700;
    font-style: italic;
    src: url("https://fonts.shopifycdn.com/cabin/cabin_i7.06cbf354eb07f0abe4e75bdac05ba290fb6a01a1.woff2?h1=emFkZW...") format("woff2"),url("https://fonts.shopifycdn.com/cabin/cabin_i7.54615379d83f676a3e0def67c629135eca2c6971.woff?h1=emFkZWt...") format("woff")
}

.grid {
    *zoom:1}

.grid:after {
    content: '';
    display: table;
    clear: both
}

etc...

 

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
Shopify Partner
1838 173 601

Hi, sorry for late reply.

Few things going on here before you even need worry about the flicker or preloading.

You are loading your font, which appears to be Font Awesome from a local path which won't work. You need to either

  • Load the font from a CDN since I don't think Shopify has it in its own font CDN
  • Save the font files in your assets folder then use Liquid's asset_url filter in your SCSS

Once you get those sorted we can move on to preloading and flicker.

I turn coffee in to code - since 1998
0 Likes

Hi Karl,

Thanks for your support.

I get what you mean. After a few more research, I found a way to load the font I were looking for with google (Cabin for our example bellow). I think this way, it loads from google CDN  right ? 

So here's what I got in standard mode :

@import url('https://fonts.googleapis.com/css?family=Cabin');

and in import mode :

<style>
@import url('https://fonts.googleapis.com/css?family=Cabin');
</style>

 Looking forward to hear from your next tips.

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
Shopify Partner
1346 22 208

Hi Max,

You are on the right path.

Try this:

1. Download Roboto from https://google-webfonts-helper.herokuapp.com/fonts/roboto?subsets=latin

2. Upload it in your Shopify files folder (this will save a DNS handshake as you won't need to resolve another domain)

3. Inline the fonts in your theme.liquid, will look something like this depending on what you want to load:

<style>
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Roboto Light'), local('Roboto-Light'),
       url({{ 'roboto-v18-latin-300.woff2' | file_url }}) format('woff2'),
       url({{ 'roboto-v18-latin-300.woff' | file_url }}) format('woff');
}
...
the rest of the weights
</style>

4. Early in the <head> preload the used fonts:

<link rel="preload" href="https:{{ 'roboto-v18-latin-300.woff2' | file_url }}" as="font" type="font/woff2" crossorigin="anonymous">

You can also prefetch the DNS:

<link rel="dns-prefetch" href="https://cdn.shopify.com">

 

In the DevTools network panel you should see those fonts loaded with a HIGH priority.

Make sure you have all the paths and names corect.

Hope it helps.

https://sections.design tips, tricks & Shopify sections
1 Like

That helps a lot Mircea,

So here's what I have done now :

I downloaded Cabin font with the website your provided me and uploaded both .woff and .woff2 versions in my shopify file folder (it was .zip initially).

Then I added this on top of my theme.liquid file : 

<style>
  
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin'), local('Cabin-Regular'),
       url({{ 'cabin-v12-latin-regular.woff2' | https://cdn.shopify.com/s/files/1/0034/6868/9520/files/cabin-v12-latin-regular.woff2?584972270910786... }}) format('woff2'),
       url({{ 'cabin-v12-latin-regular.woff' | https://cdn.shopify.com/s/files/1/0034/6868/9520/files/cabin-v12-latin-regular.woff?3461975740689625... }}) format('woff'), 
     
     
}
  
  
</style>

Then I added this inside the <head> tags of theme.liquid : 

<link rel="preload" href="https:{{ 'cabin-v12-latin-regular.woff2' | https://cdn.shopify.com/s/files/1/0034/6868/9520/files/cabin-v12-latin-regular.woff2?584972270910786... }}" as="font" type="font/woff2" crossorigin="anonymous">

I replaced file_url with the Cabin font file I uploaded in my file folder. I first tried with the file .zip (cabin-v12-latin.zip), then only with the file .woff2 (cabin-v12-latin-regular.woff2). 

But in the end, I see in the DevTool the following line in red :

cabin-v12-latin-regular.woff2

Status Code: 404 Not Found and "failed to load status dats" in the preview tab.

It's not working.

We are getting closer, but not yet there. I'm really trying, I swear ^^

Thanks for your help. I hope other people will benifit this too.

C'est simple comme bonjour ! Ou presque.
Need some help to customize your website? Message me anytime: 5euros.com/profil/maxdesign
0 Likes
Shopify Partner
1346 22 208

Hi Max,

You are almost there, you've replaced the "file_url" but we can go like this.

Lets take it from the start:

1. Download your fonts from Google Webfonts Helper

2. Upload them in your files folder

3. In your theme Snippets folder create a file "css-fonts.liquid"

This file contains the CSS font-face declarations. google-webfonts-helper will generate the CSS rules, you need to replace the generated URLs with the file URLs you'e uploaded:

<!-- snippets/css-fonts.liquid -->
<style>
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), local('Roboto-Regular'),
       url(//cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff2) format('woff2'),
       url(//cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url(//cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff2) format('woff2'),
       url(//cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff) format('woff');
}
</style>

 Note: the declarations are inside <style></style> tags. We also remove the URL querystring, the last part of the URL, something like "?123456789"

4. In Layout/theme.liquid inside <head></head> element include the new file:

{% include 'css-fonts' %}

5. In Layout/theme.liquid inside <head></head> element include the preload directives: 

<link rel="dns-prefetch" href="https://cdn.shopify.com">
<link rel="preload" href="https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://cdn.shopify.com/s/files/1/2659/0940/files/roboto-v18-latin-700.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Note: this goes above "css-fonts", it needs to be early in the DOM so the browser can start to download these fast.

I am trying to put something better down here: https://sections.design/blogs/shopify/preloading-fonts

But it is still very early and in progress draft.

Hope it helps

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Expert
2676 65 665

Guys, wouldn't it be better to make it work with Shopify own fonts?

Have not tried it myself, but, generally, I guess it's possible to do something like this -- capture the output of font_face and parse it for actual urls and font types?

{% capture ff_output %}
{{ settings.type_header_family  | font_face }}
{% endcapture %}
{% assign font_files = ff_output | split: "src: " | last | split: 'url("' %}
{% for line in font_files %}
  {% if line contains '")' %}
    {% assign font_url = line | split: '")' | first %}
    {% assign font_type = line | split: 'format("' | last | split: '")' | first %}
    <link rel="preload" as="font" href="{{ font_url }}" type="font/{{ font_type }}" crossorigin="anonymous">
  {% endif %}
{% endfor %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Partner
1346 22 208

Hi Tim,

Have't runed that code, what should it output in the href?

I self host the actual font files so I can avoid additional DNS connections to other servers like googleapis.com and gstatic.com.

Would be interesting to see a working demo and look at the network requests.

Thanks

https://sections.design tips, tricks & Shopify sections
0 Likes