Font Preloading [SOLVED]

[JDW]

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

@StefanfromItaly

<link rel=“preload” href=“fonts/cicle_fina-webfont.woff2” as=“font” type=“font/woff2” crossorigin=“anonymous”>

• rel – this tells the browser to preload the font file.
• href – this is the link to the actual font file. You’ll need to edit it to reflect the font that you want to preload. Better to use the full url of the file location!
• as – this tells the browser that it’s preloading a font file.
• type – this specifies the font file type. You’ll need to change it if you want to preload a different file type.
• crossorigin – this is needed to satisfy a quirk of font preloading, which I’ll mention more in the next sections.

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!