Welcome to WebmasterWorld Guest from 52.91.39.106

Forum Moderators: phranque

How Preload Self-Hosted Fonts

     
11:59 pm on Nov 1, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


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!
1:54 am on Nov 2, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Ya think Lighthouse might be returning a cached report; either a shortcoming of their tool or your own cache setting?
1:19 am on Nov 3, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


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?
3:28 am on Nov 3, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:9727
votes: 929


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...
10:31 am on Nov 3, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


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 .
12:31 am on Nov 4, 2018 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Dec 2, 2017
posts: 61
votes: 1


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!
10:41 am on Nov 4, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


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.
11:08 am on Nov 4, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Sept 13, 2018
posts:355
votes: 71


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members