WebKit Bug: Anti-aliasing for @font-face fonts

This is a known Webkit bugany text with @font-face applied will be rendered without anti-aliasing if there is a text element without anti-aliasing applied preceding it. Usually those are fonts smaller than 5px or monospaced fonts at small sizes which are rendered without anti-aliasing.

I noticed this bug on this page — the heading “Kāzu ABC” was rendered aliased despite having the main menu in between that heading and the logo which had font-size:1px; applied. The only way to fix this is by avoiding aliased text directly before elements that use @font-face.

Here is a live demo of the bug.


  1. Federico says:

    I’m not sure what version you’re using but with Chrome 16.0.891.1dev / Lion 10.7.1 the problem does not appear: http://d.pr/JMkD

  2. Federico says:

    Also, if that screenshot was taken on a Mac/Chrome, you’re probably using the version 16.0.891.ZERO as there was a bug that prevented sub-pixel antialiasing on all text, which the text in your screenshot seems to lack. (Zoom the image and compare it with mine)

Leave a Reply