Mitt Romney Web Font Problem

What happened?

Few years ago, James Muspratt tweeted the following image:

The headline was rendered using the Apres Titling Gothing 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.

References
https://www.zachleat.com/web/mitt-romney-webfont-problem/
https://css-tricks.com/fout-foit-foft/
https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/
https://wpspeedmatters.com/fix-foit-font-in-wordpress/
https://www.afasterweb.com/2015/08/06/avoiding-the-foit/

14 Comments

AndreCBakr

Jul 19, 2020 04:07:50 am

I am just uncertain where you are getting your information, but great topic. I has to spend some time learning far more or understanding more. Thanks for wonderful information I needed this information for my mission.

Dy

Jun 01, 2020 02:06:59 pm

Aw, this was an extremely nice post. Finding the time and actual effort to create a good article? but what can I say? I put things off a whole lot and never seem to get anything done.

Mohammand

Jun 01, 2020 01:06:36 pm

Good way of describing, and good article to get data regarding my presentation topic, which i am going to deliver in college.

Nari

May 31, 2020 07:05:06 am

I love the efforts you have put in this, appreciate it for all the great posts.

Ricky Fernd

May 31, 2020 07:05:45 am

What's up everyone, it's my first visit at this web site, and piece of writing is really fruitful in support of me, keep up posting these types of articles or reviews.

Milani

May 31, 2020 06:05:42 am

Your method of telling all in this post is genuinely good, all be able to easily know it, Thanks a lot.

Dev

May 31, 2020 06:05:13 am

Great beat ! I wish to apprentice at the same time as you amend your site, how can i subscribe for a weblog site? The account aided me a acceptable deal. I have been a little bit familiar of this your broadcast offered shiny clear concept.

Salman

May 31, 2020 06:05:44 am

Hi there, You've performed a great job. I will certainly digg it and for my part suggest to my friends. I am sure they'll be benefited from this web site.

Hemany

May 31, 2020 01:05:40 am

magnificent points altogether, you just received a brand new reader. What might you suggest in regards to your post that you made a few days ago? Any sure?

Rusty Kimb

May 30, 2020 09:05:58 pm

Hello.This post was really remarkable, particularly since I was browsing for thoughts on this topic last Monday.

Nanny

May 30, 2020 02:05:34 pm

I really like your writing style, good information, thanks for posting :D.

Timber

May 30, 2020 10:05:30 am

Super-Duper blog! I am loving it!! Will be back later to read some more. I am taking your feeds also

Ketan

May 29, 2020 02:05:31 pm

I really like forgathering utile information, this post has got me even more info!

Ricky

May 29, 2020 02:05:23 pm

Keep working, splendid job!

Leave a reply

Your email address will not be published. required fields are marked *