Zach’s ugly mug (his face) Zach Leatherman

Web Fonts for President 2016

April 19, 2016 On Twitter (archived)

Ha ha. You thought I wouldn’t do it.

Ha.

Hillary Clinton

Before we begin, let’s just get it out of the way—yes, Hillary has her own CDN servers and self hosts her web fonts. I think we’re all sick and tired of hearing about Hillary’s damn web fonts. Well—before we move on from that, let’s also get it out of the way that Hillary’s CDN domain name privacy provider is based in Panama. That country sounds familiar for some vaguely topical reason. Anyway, font loading.

  • -5 points for using stock browser behavior (not using any font loading strategy). This is very bad. On some web browsers this makes web font requests a single point of failure. Since WebKit does not have a FOIT timeout, hanging web font requests could abandon users with invisible text until they reload the entire page.
  • -1 point for average web font weight > 30KB. (95.8KB total for 2 web fonts) This is likely why her site used the full Chrome FOIT timeout of 3 seconds. My web font spidey sense says there is big savings to be had here, probably by subsetting the fonts.
  • +1 point for using three or less web fonts (2 total).
  • +2 points for commissioning your own typeface variant.
  • A small bug: the same font file is listed for both the WOFF2 and WOFF formats. See below:
@font-face {
  font-family: 'SharpUnity';
  /* This should be SharpUnity-Book.woff2 */
  src: url("../fonts/SharpUnity-Book.woff") format("woff2"),
       url("../fonts/SharpUnity-Book.woff") format("woff");
}

Candidate Web Font Score: -3

Bernie Sanders

  • +5 points for going full FOUT. This is a better alternative to using stock browser behavior for font loading. This gives the user immediately readable text on first render and very minimal invisible text during the loading process. Bernie is using TypeKit here, which loads a stylesheet full of Web Font Data URIs.
  • +1 point for average web font weight < 30KB. (204KB total for 7 web fonts)
  • -4 points for using 7 web fonts total. Insert (performance) budget joke here. (-1 point for each web font over 3)
  • -1 point for using a serif fallback for a sans-serif web font. Likely he’s trying to reach across the aisle and unite the two major font-family parties, but this makes for an awkward transition.

Note the TypeKit load time here is approximate. Both WebPageTest and Chrome Canary’s Filmstrip modes failed to capture the full Bernie render filmstrip due to a premature onload event.

It should also be noted that because Bernie is using TypeKit, he gets a bunch of font loading benefits for free. And when I say free, I mean that he’s likely paying the experts at TypeKit a fee for which he receives their expertise in font loading and his site sees performance benefits from that.

Candidate Web Font Score: 1

Donald Trump

  • +1 point for attempting to use a font loading strategy by using loadCSS to load a stylesheet from Google Web Fonts, an approach I will now refer to as the Donald Trump Hail Mary strategy.
  • -5 points for not using a real font loading strategy. Remember that loading the stylesheet asynchronously only prevents the initial CSS request from blocking. You’ll still incur default browser behavior when the fonts themselves begin loading. The mechanics of how he loads loadCSS using <script async> combined with an automatic performance optimizer called Rocket Loader from Cloudflare put the web font request almost at the end of his performance waterfall. This is very interesting, primarily for the fact that for most of the waterfall the fallback text is rendered. This is good (+1 point). However, the delayed load means that FOIT will occur long after the user has started interacting with the page. Note also that default browser behavior is still in play and web font requests will still be a single point of failure on some web browsers (WebKit, for example, with no FOIT timeout).
  • +1 point for average web font weight < 30KB. (62.3KB total for 5 web fonts)
  • -2 points for using 5 web fonts total. (-1 point for each web font over 3)
  • While he doesn’t use blocking Data URIs for his web fonts, he does use them for a font icon for his video player. I won’t deduct points for this since it’s outside the scope of the study—but still a yuge anti-pattern.
  • I will also note that Donald uses YouTube <iframe> embeds on his page, which also loads a Roboto web font. This would be a much better case for system fonts, but that’s a third-party/Google problem. Should a leader be responsible for his entire page, including third party content? Yes—however, it still feels harsh to deduct for this. But I will anyway (-1 point), since Donald is a racist, a misogynist, and a horrible human being.

Candidate Web Font Score: -5

Ted Cruz

Ted Cruz’s web site is… well, it’s 17MB with 167 requests and took 36 seconds to load on throttled 3G.That says most of what needs saying.

  • -5 points for using stock browser behavior (no font loading strategy)
  • -1 point for average web font weight > 30KB. (312.6KB total for 5 web fonts) This likely causes Chrome to hit its FOIT timeout of 3 seconds. The web fonts were larger than Hillary’s and more numerous. If you’re going to spend a lot on web fonts, at least have Bernie’s decency and give your users a web font safety net with a FOUT strategy. Even though his hero text hits the FOIT timeout and should be readable at that point, it in fact is not readable without the background image because it’s color: #fff.
  • -2 points for using 5 web fonts total. (-1 point for each web font over 3) 5 different weights of Museo Sans, which according to the licensing means he paid for his fonts.
  • -1 point for using a serif fallback for sans-serif web fonts. Again, another awkward transition.

Candidate Web Font Score: -9

Results

(Times generated using Chrome Canary’s Developer Tools Network Throttling in Regular 3G mode)

Candidate Text Readable Web Font Render FOIT Web Font Weight
Hillary Clinton 7.42s
8.09s Best
Max
95.8KB
(~47.9KB each)
Bernie Sanders
5.69s Best
~10.95s
~0s Best
204KB
(~29.1KB each)
Donald Trump 2.44s to 13.38s 14.16s-14.32s 0.8s
62.3KB Best
(~12.5KB each)
Ted Cruz 22.26s
(Wow.)
27.78s-28.27s Max
312.6KB
(~62.52KB each)

Conclusion

Bernie Sanders was the one candidate that had a font loading strategy (using TypeKit). Donald Trump was the one candidate that tried to have a font loading strategy but it ended up being more bravado than actual results. The other two candidates had no font loading strategy.

Donald Trump was also the only candidate that did not pay money for his fonts in any form, using Google Web Fonts. He built a web site and Google is paying for it. At presidential website scale Bernie likely paid for TypeKit, Hillary paid for her own typeface (awesome), and Ted Cruz probably paid somewhere between $60 and $90 for variants of Museo Sans.

It’s interesting to note that the candidates that self hosted their fonts (Hillary and Cruz) had the highest individual web font file sizes. This isn’t too surprising, the tools to optimize local font files are fairly esoteric and complex. In this regard, using a font foundry may be better than self hosting despite the sacrifices in control over font loading.

What did we learn here? Web Font loading is far too complex to draw conclusions about the quality of a web site based on where you load your web fonts. Using a web font service doesn’t necessarily mean that your web site will use best practices. We must be knowledgeable about the internals of the tools we use in order to best utilize them to our advantage. At the end of the day if you don’t want to put any effort into it, it’s safer to use TypeKit.


< Newer
CSS Position Sticky
Older >
The Web Fonts: Preloaded

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and 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 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

10 Comments
  1. emerazea Disqus

    06 May 2016
    *claps*
  2. chaoaretasty Disqus

    06 May 2016
    JUsT A qUICK fYi. THe link tO tHe PoST ABoUT dAtA-uRis Is wrOnG.
    1. zachleat Disqus

      06 May 2016
      ah, thanks! I’ll fix it up
  3. Chris Laursen Disqus

    07 May 2016
    thanks for the article, now I'm nervous about my technique… can you score my page? raglan.nyc :o
  4. Lyftsite Disqus

    08 May 2016
    Admin, if not okay please remove!Our facebook group “selfless” is spending this month spreading awareness on prostate cancer & research with a custom t-shirt design. Purchase proceeds will go to cancer.org, as listed on the shirt and shirt design.www.teespring.com/prostate-...Thanks
  5. Matt Disqus

    09 May 2016
    This was a fun read.
  6. Rhys Lloyd Disqus

    10 May 2016
    So, what is the current (generic) best practice for a web font strategy? I'm currently using the loadCSS approach, but seems I would be losing points! Any links?
    1. zachleat Disqus

      18 May 2016
      So many approaches documented on my own web site: https://www.zachleat.com/web/A bunch of good articles also listed here: https://fontfaceobserver.com/
  7. Stefan Tomas Disqus

    10 May 2016
    Is Zack is supporting Bernie for President?
    1. Qodesmith Disqus

      20 May 2016
      Zack is supporting sans-serif for president.
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)