Early last year, I disabled web fonts in my browser. Several sites and blogs
which I follow use a custom font that the author thought was pretty but has
quite poor legibility. Some make it hard to tell apart the m and the n.
Others use thin fonts which are hard to focus on visually. Some are just
terrible for readability and merely designed to look good.
Disabling web fonts is a known accessibility feature for users with dyslexia, low vision, or other cognitive impairments. I also consider my usage of this toggle an accessibility tweak, despite not belonging to any of the above groups.
My experience was quite positive although not without its caveats. The main thing that breaks is when sites use web fonts for icons. Don’t use web fonts for icons. They are an unnecessary hack and break when enabling this accessibility feature.
The good
As intended, most sites became easier to read, especially those that use exotic fonts with poor readability.
As an unexpected side effect, pages loaded noticeably faster. The improvement was immediately obvious and the explanation is simple: instead of having to wait for an additional font resource to load before rendering, the browser can render text on websites much sooner. This was a very pleasant side effect.
The bad
Instead of using SVG or PNG for icons and small images many websites encode these into fonts, and display them as if they were text. These icons no longer render when disabling web fonts. Instead, they just render a placeholder for a character, or sometimes random letters and symbols.
This ugly hack originally existed to support Internet Explorer, which lacked inline SVG support and had other limitations making, web fonts the easiest workaround. Despite IE being long dead in 2025, web developers continue using font icons out of habit. It doesn’t help that a lot of online documentation still promotes this practice.
Many popular website themes and icon libraries still rely on font icons. Some have migrated, but many haven’t. This process takes time and effort, and outdated documentation doesn’t help here.
I tried to fix some of the more popular tools and themes used for documentation websites in the open source ecosystem. But the sad reality is that most developers don’t seem to care about accessibility.
A few specific sites break quite badly without web fonts. One of the worst offenders is Google’s documentation websites. Individual icons are replaced with a whole word or a short sentence, but these overlap with the text around them, making the whole thing unreadable. I have no idea what kinds of horrible hacks they’re using, but it’s honestly amazing how much complexity has been piled onto simply rendering some text, hyperlinks and a few icons.
Conclusion
Don’t use web fonts for icons. Use the formats that were invented for this purpose instead. IE, the only reason to use these, is long dead.
When reviewing the accessibility of your website, check how it behaves with web fonts disabled. Keep this as an item to your accessibility checklist.
Related
As a reminder, font icons seldom align properly with text.