CSS3 @Font-Face Embedding

Monday, 04 October 2010 07:37

Written by Miguel

css3 The web is predominantly presented by and viewed in a spectrum of a few fonts, most notably Arial, Times New Roman, Verdana and Courier. These fonts are considered web-safe, purely because every computer has them installed.

For years, developers have tried to come up with ways to embed other fonts into websites. The most common of setbacks, is cross-browser compatibility. One such method (and probably the cleanest) of embedding fonts into websites is a technique called @font-face.

Even though Internet Explorer supports font embedding since version 4, the font has to be in the proprietary EOT format, and declared specifically for IE.

Here is a useful tool to convert TTF fonts to EOT:

http://ttf2eot.sebastiankippe.com/

The method

First, we copy the TTF and EOT fonts to your website directory. Next, add the following code to your CSS file (or style to your html file header):

body {

font-family: MY_FONT_NAME, Verdana, Arial, sans-serif;

}

@font-face {

font-family: MY_FONT_NAME;

src: url("MY_FONT_NAME.eot") /* EOT file for IE */

}

@font-face {