Yogesh Chauhan's Blog

Flash of Invisible Text and Mitt Romney Web Font Problem

in CSS on May 13, 2020

Mitt Romney Web Font Problem

What happened?

Few years ago, James Muspratt tweeted the following image:

Flash of Invisible Text and Mitt Romney Web Font Problem

The headline was rendered using the Apres Titling Gothic FB typeface but using two different web fonts, one for bold and one for combination bold and italic.

This is how the page looks when all of the web fonts have finished loading:

Flash of Invisible Text and Mitt Romney Example

Why did this happen?

Each web font incurs its own separate FOIT.

Browsers starts to detect if text was set in a custom font that hasn’t loaded yet, and make it invisible until the font did load (or X seconds had passed). That’s FOIT: “Flash of Invisible Text”.

By combining two web fonts together in a single headline, the FOIT has created a race condition that alters the integrity of the content.

A glance at the headline indicates that Mitt Romney is indeed running for President. When the page finishes loading, the real message is revealed: he is, in fact, not running for President.

Obviously, this is bad, and especially so for a news organization that depends on clarity and accuracy.

How this can affect things other than politics?

Custom web fonts have been around for almost 10 years now, yet we still don’t have an optimal way to implement them on our websites.

The current font rendering behavior across browsers is poor and inconsistent, and we as web developers are left with a bunch of workarounds if we want to fix it.

This involves the use of JavaScript in order to control how text should behave while the fonts are loading.

Overall, it affects tons of everyday readers, publishers, businesses, developers, designers, project managers and the list goes on. Why so many people? Because each one of them is involved in one or the other way in creation or publishing or just reading and forwarding of the article.

Users/readability/first impressions

Have you ever loaded a web page, and for a moment everything was visible except for the text itself? And then, after a moment or two (or even more), the text itself finally showed up? Congratulations, you’ve been greeted by FOIT before!

Depending on the length of this disappearance of the text, FOIT has the capacity to cripple the usability of the site, and is something we should be wary of.

Since invisible text negatively affects the usability of the page, we will want to avoid or minimize it as much as possible.

And although the problem has the potential to be most severe in Safari, it can still happen to varying degrees in other browsers—especially if the connection is slower or the website is not well optimized.

For instance, if the site is not optimized and you have a visitor on a slower mobile connection using iOS Safari, you could end up with quite the usability disaster as the browser waits to download and parse the custom fonts.

Even in the browsers that only wait a few seconds before using the fallback, this delay can still negatively affect the user’s experience of the site.

How to Fix Flash of Invisible Text?

There are various ways to deal with it. I’ll discuss few of them.

Solution 1

Fixing “Flash of Invisible Text” will also fix the error “ensure text remains visible during webfont load “.

The font-face has a property called font-display and can have values like auto, block, swap, fallback, optional. The one we want is swap. That is font-display: swap.
font-display: swap tells the browser to use the default font until the font has downloaded, after that swap the current font to custom font.

The full syntax will look like this:

@font-face {
  font-family: 'Lobster';
  font-display: swap; //  ----> the fix!
  font-style: normal;
  font-weight: 400;
  src: local('Lobster Regular'), local('Lobster-Regular'), 

Solution 2

Make an additional CSS class that can be used to specify when to use the custom font.

For instance, instead of using a custom font directly on a h1 tag, we can make the custom font dependent on another class that will only be added to the html tag of the document when the fonts are actually ready to use. For instance:

h1 { font-family: Helvetica, Arial, sans-serif; }

.fonts-loaded h1 { font-family: 'My Custom Font'; }

This allows the text to show up in the default text immediately, and then use the custom font whenever it’s ready.

Solution 3

Utilize a Font Face loader and monitor.

In conjunction with #2, we can use a JavaScript utility like Font Face Observer to check when the fonts are actually loaded.

When they are, we would then add a class to the tag of the document (like “.fonts-loaded” in the step above).
This extra class would trigger the browser to use the CSS rules that use the custom font instead of the default.

var observer = new FontFaceObserver('My Custom Font', {});

observer.check().then(function() {
  window.document.documentElement.className += " fonts-loaded";

If the font never loads, the special class name will not be used on the document, and so the browser will never try to use the custom fonts associated with that class name.


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Debugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressWhat is Zdog?MiscellaneousHow to retrieve homepage URL in WordPress?WordPressCREATE DATABASE in PostgreSQLPostgresHow to draw an SVG path on scroll using JavaScript?JavaScriptHow to remove trailing characters from a string using JavaScript?JavaScript