• 4 minute Read

Scoring The Presidential Candidates’ Web Fonts

A web developer vets the candidates based on their font-loading strategies.

Scoring The Presidential Candidates’ Web Fonts

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 two web fonts). This is likely why her site used the full Chrome FOIT timeout of three 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 (two 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.

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 seven web fonts total. Insert (performance) budget joke here. (-1 point for each web font over three.)
-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 on-load 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. 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 five web fonts.)
-2 points for using give web fonts total. (-1 point for each web font over three.)

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


Bernie Sanders was the one candidate who had a font-loading strategy (using TypeKit). Donald Trump was the one candidate who tried to have a font-loading strategy but it ended up being more bravado than actual results. Hillary Clinton had no font-loading strategy.

Donald Trump was also the only candidate who did not pay money for his fonts in any form, using Google Web Fonts. He built a website, and Google is paying for it. At presidential-website scale, Bernie likely paid for TypeKit, and Hillary paid for her own typeface (awesome).

It’s interesting to note that the candidate who self-hosted her fonts (Hillary) 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 website based on where you load your web fonts. Using a web font service doesn’t necessarily mean that your website will use best practices. We must be knowledgeable about the internals of the tools we use in order to best use 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.

This article was adapted with permission from the author. Read the original here.

About the author

Zach Leatherman is a web developer at Filament Group. He has given talks at Smashing Conference, O’Reilly Velocity, CSSConf, and The White House.



More Stories