Sam Trenholme's webpage
Support this website or listen to my music

Web font rendering

 

February 3 2013

In today's blog, I will discuss web font rendering on Chrome, and the work arounds I use.

Web font rendering in Chrome, especially on Windows, is less than ideal. Fortunately, there are some workarounds which can make a web font look acceptable on this browser:

  • Make sure to use a font that can be modified. I personally will only use an OFL web font on my page. (If you edit an OFL font in any way, you must change its name)
  • FontSquirrel.com has a free web font generator that usually will make a font look acceptable across browsers.
  • Another program that will make a font look even better on modern computers is TTFautohint. Unfortunately, this tool usually makes a font look worse on legacy Windows XP systems without Clear Type.
  • Put font-weight: bold; in the @font-face part of the CSS so Firefox won't try to make a (usually ugly) faux-bold version of the font.
  • Some users use noscript or other tools which disable web font rendering. Make sure the page looks decent if the fonts are replaced by "web safe" fallback fonts. In my particular case, the web font I use looks somewhat like Calibri, so I use that as the first fallback font, as well as Arial as the secondary fallback font for Linux and Mac users who may not have Calibri [1]
  • Printing pages with web fonts in Webkit browsers (Chrome, Safari) and Gecko browsers (Firefox) doesn't work. My workaround is to hide the web fonts from Webkit's printing CSS, and have old-school "web safe" fallback fonts for Gecko-based browsers.
  • A friend of mine pointed out that using Google's web font API can minimize Chrome's web font rendering problems.
Since I wasn't 100% happy with how the numbers looked with Font Squirrel's hinting, I ended up using Font Forge to edit the font's numbers by hand. It took me about a week to get the font to look decent across all browsers [2].

See also: Embedding web fonts; Webkit @font-face bug; Web typography (2011); Web typography (2012)

Footnotes

1: I don't think there's a legal way to install Calibri in Linux, but it's legal to download the older Arial, Verdana, Georgia, Trebuchet, etc. in Linux.

2: The web font's numbers look very slightly off in Linux, but since Linux is at most 1% of web users, and since the glitch is subtle, trying to fix it is not worth it for me.

To post a comment about an entry, send me an email and I may or may not post your comment (with or without editing)

Previous entry Next entry Blog index