Stylin’ with CSS: A Designer’s Guide, Third Edition (Arnold Marcus' Library) by Charles Wyke-Smith

Author:Charles Wyke-Smith
Language: eng
Format: mobi, epub
Publisher: New Riders
Published: 2013-03-14T16:00:00+00:00

Packaged @font-face Kit

The second method of embedding fonts in your pages uses the @font-face rule, which requires that the fonts are accessible from your site’s, or a third-party, Web server. Fonts served in this way download to the browser when the first page that uses each font loads; after that, they are cached in the user’s browser and don’t have to download again. Note that the user can’t use the font for any purpose except to display Web pages that include that font.

The @font-face approach involves more effort, but offers the possibility to use virtually any font you wish. Because of licensing restrictions, you must either purchase a font, or use a royalty-free font, that is licensed for embedding.

One issue with using @font-face is that different browsers require different font formats. The Firefox browser, and Webkit browsers such as Safari, Chrome, and mobile Safari iOS since v4.1, use OpenType (OTF) or TrueType (TTF) font formats. Internet Explorer uses the Embedded OpenType (EOT) format, and some other browsers, such as mobile Safari pre-iOS 4.1, use the Scalable Vector Graphics (SVG) format. However, the different font formats are available in ready-to-use kits, or can be readily generated from a font on your computer (again, ensure you have a license to use the font in this way).

Font Squirrel (www.fontsquirrel.com) offers an extensive library of fonts in ready-to-use “font kits.” Each font kit includes the font in all the required font formats, and the related CSS code to ensure that each browser is served the correct format. FontSquirrel also has a converter that allows you to upload and convert any font into a font kit.

Here is an example of Font Squirrel’s @font-face CSS code for the font Ubuntu Titling Bold, but this format will work for fonts from other sources, too.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.