BeStartDezign your web knowledge: Import Other fonts into website

Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like Cufón, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.
We’ll take a quick look at using @font-face in CSS and 15 great free fonts you can start using today.

What is @font-face?

@font-face is a CSS rule that lets web designers link to a font that visitors may not have installed. Using this, we can get around the problem of web-safe fonts as well as prevent creating additional dependencies in other methods such as Cufón, sIFR, etc.
Once the font is linked, it is used just like you would use any other font in your CSS. Imagine the possibilities! Unfortunately, there are concerns from many font foundries and others that is currently limiting the use of this rule.
You MUST be sure the font you intend on using is appropriately licensed for @font-face linking/embedding.

Why Use @font-face?

@font-face doesn’t rely on any technologies other than good’ol CSS, the font file you want to use and a capable browser. Other technologies such as Cufón and sIFR rely on JavaScript and Flash.
Browser compatibility is getting much better too. Currently it is supported in Firefox 3.5+ (I’ve heard 3.1+), Safari 3.1+, Opera 10 and Internet Explorer 4+. Yes, it’s been supported since IE4!
While that still leaves a lot of web users without @font-face support, it’s okay because they will just get another font in your font stack. Plus, Firefox, Safari and Opera users tend to upgrade their browsers much faster than Internet Explorer users so at least we won’t have to wait on IE with this.

Using @font-face (Firefox, Safari, Opera, Chrome)

Before I get started, bookmark this resource. CSS Fonts Module Level 3 via w3.org
Using the @font-face rule is pretty simple. We’ll link the font(s) and specify format and style. Then apply the newly linked font family to the elements you want. I’ve done the h3 tag as an example using a class of “droid”. In the example, I also specified a normal font weight so the heading doesn’t default to bold.

@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-Regular.ttf) format("truetype");
}
 
@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-Italic.ttf) format("truetype");
 font-style: italic;
}
 
@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-Bold.ttf) format("truetype");
 font-weight: bold;
}
 
@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-BoldItalic.ttf) format("truetype");
 font-weight: bold;
 font-style: italic;
}
 
h3 { font-weight: normal; }
h3.droid { font-family: "Droid Serif", serif; }

Here’s what we get. The first 4 examples are just default as shown in Safari. The last 4 examples are the Droid Serif font family.

@font-face Font Formats

You can use OpenType (”opentype”, .otf) and TrueType (”truetype”, .ttf) in Firefox, Safari, Opera and Chrome but not in Internet Explorer. We’ll need to specify separate rules for IE.

Using @font-face in Internet Explorer

While Internet Explorer was an early adopter of @font-face, they decided to go with a more proprietary format (Embedded OpenType, .eot). So, we’ll need to specify the @font-face rule before the rules for the other major browsers. We also don’t need to set the format because IE will only use .eot fonts.

@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-Regular.eot);
}
 
@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-Italic.eot);
 font-style: italic;
}
 
@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-Bold.eot);
 font-weight: bold;
}
 
@font-face {
 font-family: "Droid Serif";
 src: url(DroidSerif-BoldItalic.eot);
 font-weight: bold;
 font-style: italic;
}
 
/* Other major browser rules come after IE rules */

And there you have it! Custom fonts for your websites, designs, etc. without all the hassle of JavaScript and Flash dependent solutions.

Converting to EOT Fonts

If you found a font that is licensed to be used with @font-face linking but is only provided in TrueType (.ttf) or OpentType (.otf) formats, fear not. They can be converted (but make sure the license permits it).

Microsoft WEFT

Microsoft provides a tool which will convert fonts to .eot. However, I haven’t used it and I’ve read that it’s a little tricky to use.

ttf2eot

There is a small command line utility called ttf2eot that is quite easy to use, hosted via Google Code.

A few people have setup an online version of ttf2eot as well.

If you need to convert from OTF, you’ll need to use FontForge to convert to TTF then use ttf2eot to convert to EOT. I know, it’s a bit of a pain but it’s better than nothing!