I have successfully tested the following sample on the latest versions of the browsers I use:
Firefox
98.0.1 (64-bit) is updated
Microsoft Edge
Version 99.0.1150.39 (Official Build) (64-bit)
Chrome is updated
Version 99.0.4844.51 (Official Build) (64-bit))
I have experimented with various methods to address an error related to font usage, particularly when the preloaded font is not utilized correctly. Below, I am providing the sample that I have worked on for testing purposes. I have stripped down certain properties such as font style, font-weight, font-display, local references, and a single URL source; the primary issue arises when the font is not utilized correctly.
Therefore, it is essential to verify if the correct font is being used. Maybe there is an issue with the font name? Lastly, ensure that your web browser is up to date and supports the preload feature.
For more information, you can refer to the following links: browser_compatibility and CSS_Font_Loading_API.
The approach I took initially involved loading the font in two different ways: locally (by downloading the entire font for browser compatibility) and remotely (using a single woff2 font file); both methods yielded successful outcomes for me.
/*
I have downloaded this entire font locally and it works perfectly 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 output:
https://i.sstatic.net/VMBL3.png