Jagged fonts with css font-face in Firefox

Some fonts in Firefox for Windows have jagged edges with cleartype turned on. This is a result of poor hinting.

The problem cannot be fixed by other than Mozilla, but we can improve the result a bit with svg-filters.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fake antialiasing in Firefox</title>
<link href='http://fonts.googleapis.com/css?family=Metrophobic' rel='stylesheet' type='text/css'>
<svg xmlns="http://www.w3.org/2000/svg" height="0">
  <filter id="antialias">
	<feMorphology operator="dilate" in="SourceAlpha" radius="1" result="expand" />
	<feMorphology operator="erode" in="expand" radius="1" result="expand" />

    <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="blur"/>

    <feComposite in2="blur" in="expand" operator="in" />
  </filter>
</svg>
<style>
  .fakeAntiAlias { filter:url(#antialias); }
  h1 { font-family: 'Metrophobic', sans-serif;font-size:50px; font-weight:bold;}
</style>
</head>

<body>
<h1 class="fakeAntiAlias">Lorem ipsum dolor sit amet</h1>
<h1>Lorem ipsum dolor sit amet</h1>
</body>
</html>

About Tor Brekke Skjøtskift

Senior Webdesigner Media Norge Digital
This entry was posted in CSS. Bookmark the permalink.

2 Responses to Jagged fonts with css font-face in Firefox

  1. It’s not true that this is in the hands of Firefox. Firefox use the system rendering, as they should. The jagged edges at large sizes are caused by the Cleartype rendering engine in Windows. Cleartype make use of the subpixels in x-direction to draw more precise curves, but is limited to full pixels in the y-direction. Microsofts new rendering engine, DirectWrite, address this by adding blur in the y-direction.

    As a prefix, you can serve fonts with Type 1 outlines. Type 1 outlines force Windows to use it’s previous rendering engine, Standard GDI, and display the font in shades of grey in both x- and y-direction.

    I tried your script, and the results where far from acceptable: At 40 px size, the type looked washed out and changed the colour of my grey text to black.

    • I agree. The result is far from acceptable. The reason is of course that I copy and blur the text with an svg-filter – not really antialiasing :-)

      IE9 is using DirectWrite. Do you know why this is not the case for Firefox?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>