Mitt Romney Web Font Problem
What happened?
Few years ago, James Muspratt tweeted the following image:
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:
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'),
url(https://fonts.gstatic.com/s/lobster/v21/neILzCirqoswsqX9zo-mM5Ez.woff2)
format('woff2');
}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.
Sources
error examples FOIT font Mitt Romney solution web
