Cascading Style Sheets (CSS)

optimizeLegibility does not work with @font-face

Recently, twitter was buzzing with news of a CSS technique called


Recently, twitter was buzzing with news of a CSS technique called optimizeLegibility that enables better kerning and font ligatures. It's enabled by default in Firefox above 20px text, so you may have already seen it in action. I'd noticed the effect on my Talk Like Warren Ellis site (warning: possibly not safe for work language). I happily added it to my stylesheets, and was pleased to see the effect start working in Safari and Chrome as well. However, when I created the new Metal Toad site, it wasn't working.

After running some tests, I found out that optimizeLegibility and @font-face don't work together. I was able to verify that no matter how I tried to load the font using @font-face, even when linking directly to the .otf file, optimizeLegibility had no effect. But the instant I switched to a local copy of the same font, it works just fine. This is very disappointing, as @font-face has always been presented as working the same as loading native fonts, but in this one instance, they don't work the same at all.

Similar posts

Get notified on new marketing insights

Be the first to know about new B2B SaaS Marketing insights to build or refine your marketing function with the tools and knowledge of today’s industry.