Achieving font preloading compatibility across all browsers

Despite the abundance of resources on properly preloading fonts, I have yet to find a solution that works seamlessly on both Firefox and Chrome.

My current method includes:

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

However, when testing on Firefox, I encounter the following message:

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 could be missing, and what is the most effective way to preload fonts that is compatible with all modern browsers?

The font is referenced in the style.css file as follows:

@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;
}

Answer №1

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

Answer №2

If you encounter a warning, simply attempt to import the file immediately following 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"/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a stripped box shadow with just HTML and CSS - a simple guide

Hey there! I'm trying to create a navbar button with a cool stripped box shadow effect when hovered, similar to what you see in this image link. I attempted to achieve this using CSS box-shadow and linear gradient, but unfortunately it didn't qui ...

The flashing of Bootstrap tabs can be seen on various pages

Currently, I am encountering an issue with bootstrap tabs on my website. There seems to be a blinking problem with the tabs on certain pages. Check out this video showcasing the blinking tab in the search result page: Watch Here Interestingly, the same ta ...

Java Spring - The on-page styling is out of control

Currently, I am in the process of developing a taxi web application using Java Spring. After successfully creating the website with the help of a template, I encountered an issue when trying to integrate the login functionality. Strangely, the styling on ...

Step-by-step guide to activating vertical scrolling for select tiers in a multi-layered fly-out navigation

Currently working on a multi-level flyout menu to be integrated into a daterange picker for selecting time periods. Check out the jsfiddle link here: https://jsfiddle.net/6t72hd4x/1/ I attempted to set overflow-y: auto; in the .inner-list class to handle ...

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

What is the best way to add several icons at once?

Is there a way to insert multiple star icons directly below the review text? I attempted to use pseudo elements to add the icons, but I could only insert one icon when I actually need to include multiple icons. Here is what I have tried so far: .review:: ...

pictures on the blog entries

I'm looking to customize the look of images within a section. I want to add borders to the images, but since they are being added dynamically as content in blog posts, I can't reference them directly. Can you recommend a way for me to achieve thi ...

Creating a Unique Navigation Bar Design in Bootstrap 4 with Custom Styling for Active

I have successfully added a navigation bar to my page, but I am currently facing issues with the active state. I want the navigation item to be underlined when it is active (when I am on that page) or when it is hovered over, and I also want brackets added ...

"Exploring the Power of Internal Hyperlinks in HTML

As I embark on my first website building journey, I am faced with a dilemma regarding internal links. While everything runs smoothly locally, none of the internal links seem to work once the site is live. Take for instance this internal link: <a href =& ...

IE9 fails to display li::before element correctly

I have created a utility navigation bar using an unordered list and I am attempting to use li::before to add a pipe "|" symbol between each link in the navigation. Below is my utility navigation... <div class="horizontalnavlinks"> <ul> ...

Tips for enhancing the transition effect of animated gifs on a webpage using JavaScript

In my code, I have an interval set to run every seven seconds. Within this interval, there are two gifs that each last for seven seconds. My goal is to display one of the gifs in a div (referred to as "face") based on certain conditions - for example, if t ...

Navigating pages in tinymce editor

Currently, I have implemented TinyMCE as the editor for my PHP-based website. However, I am facing a challenge in integrating pagination within the editor. My goal is to allow users to input long content that will be displayed across multiple pages inste ...

Achieving a responsive card layout in Reactjs with Bootstrap by displaying four cards in a single row

const DisplayCategory = () => { const history = useHistory(); useEffect(() => { axios.get('http://localhost:8080/products', { headers: { Authorization: "Bearer " + localStorage.getItem("token&q ...

How can I use CSS to customize the appearance of the elements within an iframe?

<iframe src="#link"> #document <!doctype html> <html> ... </html> </iframe> Is there a way to customize the styling of elements within the #document using CSS only, without needing to use Jquery? ...

What is the best way to design an element that exceeds the size of my physical body

I am currently working on creating a table that needs to be larger than the body and centered. Let me provide some more information. Below is my simplified HTML code : <body> <div id="one"> <div> <tab ...

Including new styles in CKEDITOR.stylesSet that pertain to multiple elements

My idea involves creating a unique bullet list style with two specific features: a. A blue arrow image replacing the standard list icon b. Very subtle dotted borders above and below each list item. I am looking to incorporate this design into CKEditor t ...

Tips for creating a vertical drawer using jQuery and CSS

Hello, I am currently working on developing a drawer component using Ember.js. If you want to view the progress so far, feel free to check out this jsbin http://jsbin.com/wulija/8/edit My goal is to have the drawer look like the following initially: +--- ...

Breadcrumb floating to the right, yet it still manages to obstruct other content, forcing it into a

Within the Breadcrumbs section, I have the path home/profile The desired layout involves floating the Breadcrumbs to the right while keeping the Other contents unfloated to the left. Ver1 -------------------- home/profile -------------------- Ot ...

Pixelated Arial font display issue on WordPress

After learning about how Chrome renders fonts and the differences among other browsers, I encountered an interesting scenario. I have two files: one is a WordPress page where the font in the header appears pixelated, and the other is a static HTML page wit ...

How can custom CSS and JS be loaded in Sencha Touch based on the user's device - PC, tablet, or smartphone?

Is there a way to configure a webpage so that when the user is accessing it from a PC (using Safari/Chrome/Firefox), they see the "normal" version of the page, but if they are using an iPad to view the same URL, they get Sencha Touch (css, js) files in t ...