Enhanced Typography and the Use of Web Fonts
@font-face is now part of the of the CSS specification, a potentially useful feature, which allows the developer to specify a font for a page that may not already be on the client’s system. Until now, most web sites have been developed with a small list of "web safe" fonts - tahoma, verdana, etc, which are native to most operating systems. @font-face will allow the browser to download a font for rendering the page. A link is placed to either a remote site or a folder on the local site which the browser will access, download, install and render, so the site can be viewed in the way the designer desired.
The @font-face feature allows authors to reference online fonts and use them in stylesheets. Initially, font licensing issues had slowed adoption of web fonts but new licensing terms and hosted services have generated a renewed interest. When using web fonts, make sure permissions are clear.
Example declaration:
@font-face { /*Declare the rule*/
font-family: “DroidSansBold”; /*Declare the Font*/
src:url(“fonts/DroidSansBold.eot”); /*Name the file path */.eot for IE is listed first.
src: local('☺'), url('../fonts/DroidSans-Bold-webfont.woff') format('woff'), url('../fonts/DroidSans-Bold-webfont.ttf') format('truetype'), url('../fonts/DroidSans-Bold-webfont.svg#webfont5dL3IGk2') format('svg');
font-weight: normal;
font-style: normal;
}
Modifying syntax to pass more than one font type:
1. Declare the font-family normally.
2. List the .eot font for Internet Explorer as the first source.
3. List the other font types second for the remaining browsers.
4. The "smiley face" symbol keeps local font matching from occurring.
5. The Format/url syntax keeps IE from downloading resources
while other browsers continue searching until they find a supported font.
Note: This is why the .eot font type is listed first.
| Font Type | Chrome | Explorer | Firefox | Opera | Safari |
|---|---|---|---|---|---|
| @font-face | 4.0+ | 4+ | 3.5+ | 10+ | 3.1+ |
| True Type (ttf) | x | x | x | x | |
| Open Type (otf) | x | x | x | x | |
| SVG Fonts (svg) | x | x | |||
| Embedded Open Type (eot) | x | ||||
| Web Open Font Format (woff) | x(IE9) |
More information on Cross-Browser Font Syntax can be found at Paul Irish.com.
License-free fonts can be found at Font Squirrel.com at the @Font-face kits tab for downloading font types, multiple font types and the syntax for cross-browser support.
