Check if @font-face is Loaded: JavaScript Font Loading Detection

If you're using custom fonts on your website with the @font-face rule, you may encounter issues with the font not loading properly or taking too long to load. This can result in an unstyled or slow-loading website, which can negatively impact user experience and SEO.

One solution is to use JavaScript font loading detection to check if the font has loaded before applying styles to elements that use that font. This ensures that the font is fully loaded and available before it's used, minimizing the risk of unstyled text or layout shifts.

Here's an example of how to use JavaScript font loading detection:

const font = new FontFace('YourFontName', 'url(your-font-url.ttf)');
font.load().then(() => {
  document.documentElement.classList.add('font-loaded');
}).catch(() => {
  document.documentElement.classList.add('font-failed');
});

In this example, we create a new FontFace object with the font name and URL, and then use the load() method to asynchronously load the font. Once the font is loaded, we add a class of "font-loaded" to the document element, which can then be used to apply styles to elements using that font. If the font fails to load, we add a class of "font-failed" instead.

Using JavaScript font loading detection can help ensure that your custom fonts are loaded and applied correctly, improving the overall performance and user experience of your website.