---
title: WebKit Bug: Anti-aliasing for @font-face fonts
date: 2011-10-02T14:43:15+00:00
modified: 2013-09-24T14:08:22+00:00
image:: https://kaspars.net/wp-content/uploads/2011/10/webkit-font-aliasing-bug.png
permalink: https://kaspars.net/blog/webkit-bug-anti-aliasing-for-font-face-fonts
post_type: post
author:
  name: Kaspars
  avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
post_tag:
  - CSS
  - How to
category:
  - Development
---

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

This is [a known Webkit bug](http://seanmcb.com/junk/webkit-antialiasing-test.html) — **any 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.

[![](https://kaspars.net/wp-content/uploads/2011/10/webkit-font-aliasing-bug.png?strip=all&quality=90&resize=500,211 "Webkit @font-face anti-aliasing bug due to preceding font-size")](http://jsfiddle.net/39GZd/7/)

I noticed this bug on [this page](http://putukrejums.lv/kazu-abc/) — 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](http://jsfiddle.net/39GZd/7/).