How Can I Detect When a Font Has Loaded Using @font-face to Avoid FOUC?

Detecting the Loading Status of a Font Using @font-face

Often, web developers encounter a situation where icons or fonts are displayed with placeholder characters until the font files are fully loaded. This can be distracting or disruptive to the user experience. To address this issue, knowing when a font has been loaded is crucial.

The Font Load Detection Problem

In the specific scenario mentioned in the question, Font-Awesome icons are initially displayed as  due to the delayed loading of the font files. The goal is to hide these icons until the font is loaded, enhancing the visual appearance and functionality of the website.

Font Load Detection Solution

While waiting for the entire page to load may not be feasible, there are methods to determine if a font has been loaded specifically. One effective approach is to compare the width of a string rendered in two different fonts.

jQuery-FontSpy.js Plugin

To simplify this process, the jQuery-FontSpy.js plugin has been developed and is available on GitHub (https://github.com/patrickmarabeas/jQuery-FontSpy.js). This plugin offers an intuitive way to detect font loading and apply styling accordingly.

Using jQuery-FontSpy.js

To use the plugin, include the plugin's JavaScript file in your project and initialize it on the target elements. You can specify custom classes to be added or removed based on the font load status. For example:

<span class="bannerTextChecked">FontAwesome Icon</span>

$(document).ready(function() {
    $('.bannerTextChecked').fontSpy({
        onLoad: 'hideMe',
        onFail: 'fontFail anotherClass'
    });
});

CSS for FOUC Removal

To completely remove the Flash of Unstyled Content (FOUC), apply appropriate CSS rules:

.hideMe {
    visibility: hidden !important;
}

.fontFail {
    visibility: visible !important;
    /* fallback font */
    /* apply necessary styling to avoid layout issues with the fallback font */
}

Conclusion

By utilizing font load detection techniques, you can enhance the user experience by ensuring that fonts are displayed only when they are fully loaded. jQuery-FontSpy.js makes this process effortless, enabling you to add styling based on the loading status of specific fonts.

The above is the detailed content of How Can I Detect When a Font Has Loaded Using @font-face to Avoid FOUC?. For more information, please follow other related articles on the PHP Chinese website!