Font Preloading

Running my Blocs 3.5.5 generated website through Google’s Page Speed Insights yields a miserable score of 40 on Mobile for many pages, even though the same pages score 90 on Desktop. One piece of advice it gives is to PRELOAD fonts. I think this means only the fonts that are “above the fold” (the visible part in the browser when the page first loads). How do I do preload specific fonts?

Related question…

I have read that the crossorigin attribute must be used even if the font fetched is not crossorigin. Without that, apparently, the same font will be fetched twice! Here is example code given:

<link rel="preload" href="fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

I assume that only WOFF2 is mentioned because most modern browsers will use that over TTF, WOFF, etc. That’s all fine and well. But again, how do I accomplish this? I know what fonts are used above the fold, so what I want to know is the JS code (assuming JS is the best way to do it) to add the preload and crossorigin attributes to specific fonts I specify on a particular page.

It’s also interesting that I cannot find a single thread in this forum discussing this topic. Am I alone in having thought about this?

Thanks!

1 Like

Hello,
I self-host. Faster load time. But I only use google fonts due to licensing.
I download the google fonts I want to you use (lato in this example). I then add them to the fonts folder on my web server (in this case …/fonts). It can be any folder of your choosing. Make sure the path from css document to font folder is correct.

At the the top of the main css style sheet I add this:

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lato-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/lato-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/lato-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/lato-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/lato-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/lato-v17-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

Now you can delete the url path for the fonts at the top of each html page.
link href=‘https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap&subset=latin,latin-ext’ rel=‘stylesheet’ type=‘text/css’

Maybe someone has a better solution.

I certainly appreciate your time in replying, especially since this forum is saying it’s been 4 months since your last post! :slight_smile: But how does your reply pertain to the topic of font “preloading”? You see, the fonts Google flagged were on my own server, yet it still said to preload the ones “above the fold.” That is why I posted the original question about how to solve that specific problem, such that my page’s ranking in Page Speed Insights will rise. Thanks.

It would appear I have succeeded in stumping the forum experts yet again! :face_with_raised_eyebrow:

1 Like