Support this website
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)