How to Avoid Flash of Unstyled Text (Fout) Even with Web Font Loader

@font-face flash of unstyled text in internet explorer 9

To prevent the FOUT in IE9, you can embed the TTF-Font-File in CSS via base64-encoding
(This solution works in all Browsers)

Be shure to deliver EOT files to IE <=8

<!--[if (lte IE 8) & (!IEMobile) ]>
    <link rel="stylesheet" media="screen" href="styles/fontface-ielte8.css" />
<![endif]-->

Put in your @font-face-rule (fontsquirrel recommended)

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('MaidenOrange-webfont.eot');
    src: url('MaidenOrange-webfont.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
}

Next step, include the @font-face-declaration for all other browsers (IE9+ supports media-queries more info:

<link rel="stylesheet" media="screen and (min-device-width: 1px)" href="styles/fontface.css" />

Put in your @font-face-rule with the TTF-file via DataURI(base64-encoding):

@font-face {
    font-family: 'MaidenDataURITest';
    src: url('data:application/octet-stream;base64, [your-base64-data]') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Therefore use fontsquirrel to generate the DataURI -> expert mode.
Nice to know: IE8 supports dataURI until 32KiB. IE9 doesn't have such limitation.

DataURI Generator for all types of files: click here

live demo from above

---

To improve the download-time

deliver just the characters you need via unicode-range: http://www.w3.org/TR/css3-fonts/#unicode-range-desc
This will cut down the download time and file-size that have to be download (works in IE9+ and newer Browsers, otherwise the whole font will be downloaded)

@font-face {
    font-family: foo;
    src: url('foo.woff');
    unicode-range: U+31-33;
}

And the next step you can apply this to set expiration dates for it via .htaccess on apache servers to let the Web-Browser know, he should cache the font-files:
This would leave the flash of unstyled content definitely on a revisit.

<IfModule mod_expires.c>
    ExpiresActive On
    <FilesMatch "\.(eot|woff|ttf|svg)$>
        ExpiresDefault "access plus 10 years"
    </FilesMatch>
</IfModule>

And then compress the font-files for faster download (via .htaccess-file):

AddOutputFilterByType DEFLATE  application/vnd.ms-fontobject application/x-font-ttf image/svg+xml

WOFF-files have allready a gzip compression built in.

You can create a .htaccess-file on your server and write this properties into.
Works well on Apache-Servers :)

---

More details:

Live example: http://georgepantazis.com/demos/fontface-datauri/

Paul Irish about FOUT: http://paulirish.com/2009/fighting-the-font-face-fout/

Compatibility details and checklist: http://www.aaronpeters.nl/blog/IE9-performance-checklist

Avoid delayed load of font-face

You're bringing up two separate issues.

A delay in downloading the actual font files is essentially unavoidable, though you can help it by not including anything you don't actually need, so as to minimize the file size overall. Depending upon what service/method you're using, this might entail reducing what character sets(/languages) you include, as well as weights and styles.

As to the flash of unstyled text, that's semi-unavoidable, partially due to the downloading time issue above. But once you've reduced that as much as you can, you should implement a font loader to take better control of this part. Here's TypeKit's (open-sourced) implementation, and a brief explanatory blog post. The example at bottom specifically addresses FOUT; you can pretty much just drop it into your own code.

Here's some information from FontDeck on using Google's loader with their service, which will also lead to using same for Google's WebFonts service.

Any other service, you'll have to start doing your own research, but those are the general concepts. With those tools, you can use a bit of scripting and CSS rules to hide the affected text until the fonts are ready for presentation, among some other uses. It's not completely idea, but at least prevents the FOUT. Once past that initial time, the browser's cache should take over and make it largely moot.

Font doing FOUT (Flash Of Unstyled Text) on every refresh on every page

If you are still experiencing this, you should try upgrading to mui v5

Make sure to completely remove any usage and also the library itself from package.json and completely finish the migration before checking it out. Once I fully upgraded all the project to v5 (in my case with emotion) all the FOUC issues I was having were fixed.

EDIT:

NextJS introduced @next/font in their version 13 which may help solve this in a more native way.

Custom fonts are also supported, including support for automatic self-hosting, caching, and preloading of font files.

import localFont from '@next/font/local';

const myFont = localFont({ src: './my-font.woff2' });

<html className={myFont.className}>

---

Related Topics