23 September 2010 09:15
Giving Challenged @font-face Fonts The Italics Makeover
See the nice italicized text in the heading of this article? It is not so obvious to style as you may think. There are many great free and commercial fonts out there that allow @font-face embedding. Unfortunately, not all of them have an italics variant for one reason or another. For example, the font I use for my blogs headlines, Graublau Sans Web, does not have a true italics variant included with it, while the font I use for the blog’s copy, Droid Sans, does. When a font doesn’t have an italics variant, and you try to italicize it in a web-page using i and em tags, the results depend on the browser you are using:
* Safari, Chrome and Opera will render the font normally without italicizing it.
* Internet Explorer and Firefox will attempt to italicize the font, but Internet Explorer will slant the font at a 20° angle while Firefox implements a 10° slant.
