Sans Fonts: A Content Blocker for Web Fonts

If you are a Safari user and you already know that blocking web fonts is a great idea, download the Sans Fonts app for iOS 9 and the Safari 9 extension for El Capitan straight away.

The code is available on GitHub. It’s a trivial app, but pull requests to improve the blocking rules are welcome.

What’s wrong with web fonts?

Like most ingredients of the modern web, web fonts have their own potential privacy and security problems. But all major font rendering engines are battle-tested now, and there are plenty of browser extensions to protect our privacy.

(Update: Wrong. iOS 9.1 again fixed lots of font-related security issues.)

Still, there one issue that is not going to be fixed anytime soon: You cannot read a single word on a web page before all fonts have finished loading. This article by Paul Irish explains why this is a feature(!), one that browser vendors have carefully implemented over the course of the last years. (If you are into acronyms and insanity, this blog post sums up the current state of affairs.)

Most web browsers give up on a web font if it doesn’t load within three seconds, at which point a fallback font will be used. Safari doesn’t. And why should we wait before we can start reading, anyway?

Fifteen years ago, I was taught that whenever I use a background image on a website, I should set a similar background colour. That way, users could start reading while images were still loading (on their 56k modem).

How things have changed. In 2015, I regularly see pages with images but no text:

I don’t know why the web font didn’t load when I took the screenshot. Shaky hotel Wi-Fi? Was I on a train? Bad 3G reception? Did I run out of metered LTE data?

It happens all the time. This is me trying to log into a hotspot:

This is me looking for a place to spend the night:

And this is what many Hacker News tabs looked like in the last time:

I’m not trying to shame anyone, almost every website has started using web fonts.

It is frustrating, though, when an Apple-sanctioned search engine cannot display any results when my reception is bad, or when I really need to look up my bank’s phone number and can’t:

After staring at too many blanked-out articles with Retina-quality background images, I have given up on web fonts altogether. Even if I weren’t a Safari user, I wouldn’t want to wait for them ever again.

Dear web designers: Please lobby operating system vendors to bundle better fonts instead.

WebKit Content Blockers to the Rescue

Apple has clearly read my mind and added Content Blockers to WebKit this year. This short JSON definition gets most of the work done:

[{
    "action": {
        "type": "block"
    },
    "trigger": {
        "url-filter": ".",
        "resource-type": ["font"]
    }
}]

(Plus exceptions for Font Awesome and friends.)

Even on EDGE, all the websites listed above load in a matter of seconds now.

Download Links, Once More

If I’ve convinced you to try my iOS 9 app or my Safari 9 extension, please let me know how they work for you.

Update

This app was stuck in Apple’s review process for two weeks, so I realise I am late to the iOS 9 launch party. There are other privacy-focused content blockers that can block web fonts as well, but as far as I know, they have no exceptions for icon fonts.