Zach’s ugly mug (his face) Zach Leatherman

The Mitt Romney Web Font Problem

May 31, 2015 On Twitter (archived)
Mitt Romney at Caster Concepts
Mitt Romney at Caster Concepts by Dave Lawrence, on Flickr

If you’ve read the neverending series of blog posts I’ve written about how fonts load on the web, you’re probably already become very familiar with the The Flash of Invisible Text (FOIT), or how the browser hides the text while the web font is loading.

I wanted to highlight a particular variant of FOIT, which I’ll forever refer to as the Mitt Romney Web Font Problem. This specific problem occurs when you use multiple weights and styles of the same typeface together.

In January, James Muspratt tweeted the following image:

Screenshot of a FOIT problem on slate.com
A tweet from James Muspratt

The headline from Slate.com was important breaking news about Mitt Romney’s intention to run for President. 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. If you don’t see the italic variation above, I’ll explain why.

Correction: As Stephen Coles notes in the comments the typeface is Titling Gothic, not Apres.

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

The finished rendering for slate.com

Why did this happen? As you may already be aware, each web font incurs its own separate FOIT. 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.

What can web developers do?

  1. You can use the font loading solution I’ve been prescribing and documented over at Dev.Opera. This is by far the easiest method and will eliminate FOIT by switching to unstyled fallback text while the font is loading.
  2. If you aren’t comfortable with eliminating FOIT, you can also group your font loads into a single repaint, shown in the Appendix 1 code sample below.
  3. You can also use the previously documented Flash of Faux Text approach, utilizing font-synthesis to show browser generated bold and italic fallbacks while the real web fonts load.

What should web browsers do?

I only feel more strongly now that web browsers should fix this problem natively. They should apply the blocking font-rendering behavior in a smarter way. The browser knows when it is loading multiple @font-face fonts of the same typeface that have matching font-family properties and vary only by font-weight and font-style. It could use this information to assign a smarter priority level to each @font-face block.

  • font-weight priority list: 400, 500, 300, 200, 100, 600, 700, 800, 900
  • font-style priority list: normal, italic, oblique

Coincidentally, this matches the order in which the @font-face matching algorithm looks for a @font-face block to match up with a default styled element (font-weight: 400; font-style: normal).

For example, if the browser is loading @font-face blocks for the Roman and Bold variations of a typeface, place a higher priority on the lighter weight web font (maybe even treating the heavier weights similar to how the browser treats non-matching media stylesheets like print). If the lighter Roman version finishes first, the browser can then use font-synthesis to also remove the FOIT for the Bold variation, showing more text sooner. When the Bold variation finishes, it can swap in to replace the Faux Bold version.

This proposed browser default behavior would solve the Mitt Romney Web Font Problem without web developers having to apply fixes to their own sites individually.

What should Mitt Romney do?

Those of us that remember Mitt Romney’s sordid remarks about 47% of Americans know that his words may have cost him the 2012 US Presidential Election.

It is unlikely to be coincidence that just a few short weeks after the Mitt Romney Web Font Problem was documented on Twitter, HTTP Archive reported that web font usage among the top 1000 web sites grew to 47%.

The 47% continue to plague his legacy. I expect that we’ll see a press release from his media team shortly.

Appendix 1: Keeping FOIT, Grouping Repaints

Example variable names are for the Raleway typeface but are easily changed for any web font.

CSS

.raleway-loading body {
	color: transparent;
}
.raleway-fallback body,
.raleway-loaded body {
	color: inherit;
}
.raleway-fallback body {
	font-family: serif;
}
.raleway-loaded body {
	font-family: Raleway, serif;
}

JavaScript

var docEl = document.documentElement;
docEl.className += " raleway-loading";

// This example uses a 1 second timeout,
// adjust as needed.
window.setTimeout(function() {
	docEl.className += " raleway-fallback";
}, 1000);

// Using the CSS Font Loading API
Promise.all([
	document.fonts.load("400 1em Raleway"),
	document.fonts.load("700 1em Raleway")
]).then(function () {
	docEl.className += " raleway-loaded";
});

// Converting this to use a Polyfill syntax
// is an exercise left to the reader.

< Newer
Smashing Book #5
Older >
The Performance and Usability of Font Loading—Velocity Santa Clara

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 83 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

7 Reposts

IndieWeb Avatar for http://studio-rgb.ruIndieWeb Avatar for https://flmarket.ruIndieWeb Avatar for https://habr.comIndieWeb Avatar for https://infos.byIndieWeb Avatar for https://nsonews.comIndieWeb Avatar for https://a2zfacts.net⏪ Jim Daly ⏩
5 Comments
  1. Francesco Schwarz

    This is it exactly. Thank you very much! 👍

  2. Nicolas Hoizey

    You’re welcome! 🙏

  1. DR01D Disqus

    06 Feb 2017
    Great article. Found a misspelling in one sentence. Should be "rare" not "race". By combining two web fonts together in a single headline, the FOIT has created a race condition that alters the integrity of the content.
    1. zachleat Disqus

      06 Feb 2017
      Fair question! I did mean to use race condition there: https://en.wikipedia.org/wi...
      1. DR01D Disqus

        07 Feb 2017
        Holy smokes you were right! Time to learn a new term. 8-)
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)