16

On the site I'm working on, I have a few fonts hosted on an external server. In my <head>, I am preloading the fonts and then getting the stylesheet that includes all the @font-face rules for the font. The stylesheet is located on the same server as the fonts.

The problem I'm having though is that the font seems to have been loaded again after the stylesheet gets loaded, not utilising the preloading at all.

I saw one comment while I was searching on how to fix this that suggested this was a Chromium bug however this behaviour happens in Firefox as well.

In console I see:

The resource was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

The behaviour I'm seeing is that the font gets loaded ~1 second after the page loads and my client isn't happy with that. If the browser utilised the preloaded fonts, this wouldn't occur.

<link rel="preload" as="font" href="path to SearchlightRegular.woff2" type="font/woff2" crossorigin="anonymous" />
<link rel="preload" as="font" href="path to SearchlightRegular.woff" type="font/woff" crossorigin="anonymous" />
<link rel="stylesheet" href="path to Searchlight.css" />

I have tried putting this both above and below where my main stylesheet is. I've also tried putting the CSS call in my main stylesheet as well. All attempts yield the same results.

Below are the contents of the Searchlight.css file.

@font-face {
    font-family: 'Searchlight';
    src: local('Searchlight'), local('SearchlightRegular'),
        url('path to SearchlightRegular.woff2') format('woff2'),
        url('path to SearchlightRegular.woff') format('woff'),
        url('path to SearchlightRegular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

.font-searchlight {
    font-family: 'Searchlight', serif;
}

Searchlight loading

I imagine there is a fix for this as I've seen sites that have their fonts load in immediately (or just very fast). Nothing I've found while searching for the last 30 minutes has worked for me.

liam-milbel
  • 400
  • 1
  • 2
  • 12

1 Answers1

3

This is probably, because preload paths and css paths for fonts aren't matching, so the browser is loading that font twice.

You should ensure that your font paths are the same in preloads and css files. You will only know it's working, when you see that there's just one request for each font in the network console.

I think query parameters are not allowed in preloads. If you have query parameters, try to remove them.

For instance Wrong:

Ok:

I hope this helps, regards!

Harry
  • 41
  • 5