Font Preloading [SOLVED]

I Need Help
1

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
2

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.

3

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.

4

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

1 Like
5

Hello,
I found this article and thought I would share.

6

Thank you for the link @BAM. That link explains WHY preloading is needed, but the question remains as to HOW font preloading is achieved in Blocs 4.0.2. As it stands now, it cannot be done in the current version of Blocs.

7

Hey @JDW, I managed to do it like this-> Adding the link rel=preload into blocs - #6 by StefanfromItaly but inserting the whole url where your file is located.

2 Likes
8

Thank you for the solution! More specifically, for this info:

In my case, I added the following 3 lines via Code Editor > Project Header (which adds the 3 lines on every page in the site). They cover FontAwesome and a local font (all 3 are self-hosted on my web server):

<link rel="preload" href="https://mydomain.jp/fonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://mydomain.jp/fonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="https://mydomain.jp/fonts/GigaSlim/GigaSlim.woff2" as="font" type="font/woff2" crossorigin="anonymous">

I then ran my site through Google PageSpeed Insights again and was pleased to see the “Preload key requests” complaint gone!

I am aware some folks dislike FontAwesome and prefer to use inline SVGs instead, but if I did that, I’d been fiddling with code all the time and never get any creative design work done. Last count, one of my sites had over 60 FontAwesome fonts, and the convenience of adding new ones in Blocs is too easy to go the inline SVG route. Of course, I would prefer it if I could add the font icons as I do now (with ease) but then Blocs would auto-convert to an inline SVG, eliminating the need for loading those fonts at all!

Lastly, I should mention that WOFF2 fonts are widely supported on all modern browsers now, so you should check if you lack that format in your local fonts. Don’t settle for regular old WOFF. Be sure to create the WOFF2 too. When you create a new font variation you never had before, assuming you have already added that font in Blocs, you should delete that local font in Blocs, then make sure your WOFF2 font is sitting in the same font folder along side WOFF, EOT, TTF, SVG, etc., and then add that font back into Blocs. Restart Blocs and then the WOFF2 should appear in style.css when you Export from Blocs.

Thanks, Stefan!

1 Like
9

I’m happy you could sort it out.

1 Like