How Preload Self-Hosted Fonts

[Jennnnn]

I'm trying to preload two fonts hosted on my site. I received the following message in Google's Lighthouse:

Consider using <link rel=preload> to prioritize fetching late-discovered resources sooner:

/fonts/bowlbyone-regular-webfont.woff2
/fonts/raleway-light-webfont.woff2


I added the following code directly above the </header> on each html page:

<link rel="preload" href="/fonts/bowlbyone-regular-webfont.woff2" as="font">
<link rel="preload" href="/fonts/raleway-light-webfont.woff2" as="font">


But, I'm still receiving the Lighthouse message to preload the woff2 fonts. Any suggestions? Thanks!

[keyplyr]

Ya think Lighthouse might be returning a cached report; either a shortcoming of their tool or your own cache setting?

[Jennnnn]

I went to the Lighthouse/issue section of GitHub and a similar issue was reported recently. I don’t have any cache settings.

I tested the page on GTmetrix, looked at the Waterfall Chart and there are two requests for each font. The second set of requests have a 0ms download time. I guess those requests weren’t necessary?

[tangor]

Gotta ask, have your cleared the browser cache? Not saying this is "it", but all too often I have banged head and palm because I kept testing with a local cache (my browser) and kept getting the same "bad result", until cleared.

That said, are these fonts that special they need to be included?

Disclaimer, I use NO third party fonts, ever. And as little (as in zero) third party anything. YMMV...

[justpassing]

Lighthouse is disabling cache during the test.

I added the following code directly above the </header> on each html page:

This is above the CSS that you need to insert it, otherwise it doesn't make sense to preload a font, which was already loaded by the CSS .

[Jennnnn]

Locating the preload request before the css link didn’t help.

After reading Yoav Weiss’s “Preload: What Is it Good For? I added:

... type=font/woff2” crossorigin> and that worked!


tangor, I’ve played around with using web safe fonts but the look is too clunky for me. The site sells products where the visual appearance of the products and services is very important so I think the visual appearance of the site helps sells those products. I do use one of the fonts for the header logo so I should probably substitute that with a web safe font or at least implement subsetting because I only need 14 characters.

Thanks for your help!

[justpassing]

I guess it's the "woff2" which was missing in the type. The crossorigin is for pre-loading resources from another domain name or sub domain, and if the CORS parameters permit it.

I guess you are already doing it, but check with all common browser that these fonts are being rendered correctly. Sometimes, from one browser to an other fonts are not displayed slightly differently.

[justpassing]

Just to add that, you can also use the "push" feature of HTTP/2 to optimize the pre-loading resources (not only fonts)