<link rel=preload> Not Preloading Self Hosted Fonts

[SunEmbroidery]

I'm trying to preload fonts that are hosted on my site in the “fonts” folder. 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(www.name of site.com)
1,380 ms
/fonts/raleway-light-webfont.woff2(www.name of site.com)
1,380 ms


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!

[ScriptMan]

You are using a relative path and it looks like the directions say to use an absolute path

PHP Code:

<link rel="preload" href="www.yousite.com/fonts/bowlbyone-regular-webfont.woff2" as="font"> 


I have zero experience doing this but that is my best guess.

[SunEmbroidery]

Adding the absolute link didn’t help. I haven’t implemented any caching on the site so it isn’t that.

[SunEmbroidery]

After reading Yoav Weiss’s "Preload: What is It Good For?" I added:

... type=“font/woff2” crossorigin> to the preload request and it worked.

[ScriptMan]

Originally Posted by SunEmbroidery

After reading Yoav Weiss’s "Preload: What is It Good For?" I added:

... type=“font/woff2” crossorigin> to the preload request and it worked.

Good for you and posting the solution may help someone else.

Good job.