Substitute Web Fonts With StopTheMadness

Jeff Johnson:

I got a feature request from John Gruber, famous for Daring Fireball, also famous for despising the Arial typeface.

Honestly, the most shocking thing about the Apple Developer Program License Agreement is that the PDF is entirely typeset in Arial. Clearly it should be San Francisco, but Helvetica would be acceptable. Arial should be a firing offense.

What you may not know about Gruber, though, is that as much as he despises Arial, he dislikes Courier New even more! If Arial demands firing, then I suppose that Courier New demands… the firing squad? Anyway, Gruber requested that my Safari extension StopTheMadness add font substitution rules in order to replace all instances of Arial on the web with Helvetica and all instances of Courier New with Courier.

I told Gruber that he didn’t need to wait for me to add the feature, because substituting fonts was already possible in StopTheMadness on both desktop and mobile by using a custom <style> element containing some @font-face rules.

My favorite response to a feature request is always “Actually, you can do that now...”.

It’s such a little thing, and I know most people can’t detect the differences between Helvetica and Arial and don’t care, but it makes me so happy every day never to see the cursed fonts Arial and Courier New.

Also, if you prefer, you can substitute the system font — San Francisco — for Arial with the following CSS on the appropriate lines in Johnson’s rules:

src: local("system-ui");

If you’re not using StopTheMadness, you’re missing out.

Update 21 November 2022: Font substitution is now a built-in feature, with no need for custom CSS rules. Even better!

★ Thursday, 3 November 2022