PUBLIC MARKS from srcmax with tag font-face

The -moz-font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts.

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.

In general, type sizes run a little bigger with condensed fonts; they take up less horizontal space so we tend to set them at larger sizes than we would a more normal font. But since there isn’t a condensed font among system fonts, we don’t have a comparable fallback option for browsers that don’t support @font-face, leaving us with oversized system fonts.

Download hundreds of prepackaged @font-face kits which

include four font formats, CSS and HTML code. See below for details.

Don't see what you need? Try our new @Font-Face Generator.

Upload your own fonts and get a kit back!