Posts tagged fix

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.