Preload fonts cross browser compatibility

Question

There are countless of guides on preloading fonts properly and none of which seems to work on both Firefox and Chrome.

I use:

<link rel="preload" href="URL" as="font" type="font/woff2" crossorigin="anonymous">

But receive this on Firefox:

The resource at “file.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.

Which attribute is missing, and what is the proper way of preloading fonts that works on all modern browsers?

The font is loaded via style.css:

@font-face {
    font-family: 'NAME';
    src: url('URL to file.eot');
    src: url('URL to file.eot?#iefix') format('embedded-opentype'),
    url('URL to file.woff2') format('woff2'),
    url('URL to file.woff') format('woff'),
    url('URL to file.ttf') format('truetype'),
    url('URL to file.svg#NAME') format('svg');
    font-display: swap;
}

Does this answer your question? [Warning that font preload was not used within a few seconds from the window's load event](https://stackoverflow.com/questions/47607567/warning-that-font-preload-was-not-used-within-a-few-seconds-from-the-windows-lo) — cloned, Mar 09 '22 at 08:26
@cloned No, because as you can see, I already use the `crossorigin` attribute. — Henrik Petterson, Mar 09 '22 at 08:27
Are you using the font in another file like a css file? If so try to place the preload section after the css file. — Jonas Weinhardt, Mar 14 '22 at 12:37
@JonasWeinhardt Yes, the font is called in a separate stylesheet file, and the preload section is already after the css file. — Henrik Petterson, Mar 14 '22 at 12:51
Ok. Are you using Webpack in your project? Because then you should maybe take a look at this answer https://stackoverflow.com/a/71044377/16500604 — Jonas Weinhardt, Mar 14 '22 at 13:48
@JonasWeinhardt No use of webpack. =) See edit I just made which shows how I call the font file in my stylesheet. — Henrik Petterson, Mar 14 '22 at 14:47

score 1 · Answer 1 · edited Mar 14 '22 at 22:03

The following sample I have made is working for each of the latest browsers which I am currently using:

Firefox
98.0.1 (64-bit) is up to date

Microsoft Edge
Version 99.0.1150.39 (Official Build) (64-bit)

Chrome is up to date
Version 99.0.4844.51 (Official Build) (64-bit))

I have tested so many ways to do this, the main reason I have a font to that error is that when you don't use that preloaded font properly, I will provide the sample I have worked with below so you can test it. I have removed the properties including font style, font-weight, font-display, local, and one single URL source, the final reason is you don't use that font properly.

So, check whether you are using that font. Perhaps the font name is incorrect? and Finlay if your web browser is up to date and compatible with preload feature.

See these two links for more info, browser_compatibility and CSS_Font_Loading_API.

The scenarios I have started with was to load 2 different way the local (I have downloaded the entire font for browser compatibility) and remote (a single woff2 font file) both worked for me.

/*
I have downloaded this entire font local and works great for me...
*/
@font-face {
    font-family: 'Syne Mono';
    font-style: normal;
    font-weight: 400;
    src: url('font/syne-mono-v13-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('font/syne-mono-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/syne-mono-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('font/syne-mono-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('font/syne-mono-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('font/syne-mono-v13-latin-regular.svg#SyneMono') format('svg'); /* Legacy iOS */
    font-display: swap;
}

@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: 400;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2');
    url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2') format('woff2'),
    font-display: swap;
}

#container {
    /*
    IF YOU DON'T USE THE PRE-LOAD THE Browser shows you an error
    The resource at “file.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly.
    Try to comment on this and test it just like me.
    */
    font-family: 'Syne Mono';
}

#container2 {
    font-family: 'FontAwesome';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StackSolutions - Font Preload</title>

    <link rel="preload" href="font/syne-mono-v13-latin-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">

</head>
<body>

<div id="container" >
    <h2>This is a Syne Mono font</h2>
</div>

<div id="container2">
    <h2>This is a FontAwesome font</h2>
</div>

<div id="container3">
    <h2>This is not using preload</h2>
</div>

</body>
</html>

Final result:

score 0 · Answer 2 · answered Mar 21 '22 at 03:19

It's just warning, all you need to do is try import the file right after the preload

<link rel="preload" href="/public/font/regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="/public/font/regular.woff2" type="font/woff2"/>

Preload fonts cross browser compatibility

2 Answers2

Linked