cool tech graphics

optimizeLegibility does not work with @font-face

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.

Date posted: September 20, 2010


That bug report actually refers to malformed characters, which is not what I'm talking about.

What I see (and can reproduce in all browsers) is that the text renders fine in the correct font, but the ligatures and kerning improvements that optimizeLegibility is supposed to enable no longer apply.

I tested using a font with ligatures. When I used the local copy, it worked fine, and the ligatures displayed. When I included it via @font-face, the ligatures never displayed.

It's very disappointing. I can also confirm it doesn't work with either Gecko or WebKit unfortunately. Perhaps this will be addressed in the future?

Hi I've found out that it depends on the font character set. Try to use a fonts stack and you can see that if you include the whole character set for the font instead of just the default you'll get ligatures in webkit browsers. It's very disappointing since Mozilla doesn't need the whole character set for ligatures, as well as it works fine also with discretional ligatures if enabled.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <cpp>, <java>, <php>. The supported tag styles are: <foo>, [foo].
  • Web page addresses and email addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Metal Toad is an Advanced AWS Consulting Partner. Learn more about our AWS Managed Services

Have questions?