SpyreStudios - Design and Development Magazine

The 2 most popular typefaces used on the web today are surely Verdana and Georgia. They’re great and I used them all the time since they’re web-safe fonts. I use them mostly because I’m not a big fan of flash replacement techniques or solutions that require Javascript (sIFR, Cufon, etc…). But what about the @font-face CSS property?

While @font-face may not work in all browsers, I think it’s still one of the best solution available today. Of course not all type foundries will let us embed their fonts on our webpages. There are solutions like Typekit which look very promising but today we’ll simply go over the @font-face CSS property and check out some typefaces you can use with @font-face :)

The @font-face CSS Property

Before you can start using those typefaces on your site you need to declare the font file(s) in your CSS file along with the font-weight and font-style if available. Like this:

@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}

@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
}

Then you can call the font via the font-familly property. Don’t forget to put some other (web-safe) fonts there as a fallback option. Like this:

h1 {
font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}

Also be sure to check out the ‘further resources‘ section at the bottom of this post for more infos, especially on how to get @font-face to work in IE using EOT font files.

Some Typefaces You Can Use With @font-face

Some of those typefaces explicitly mention they’re @font-face embeddable, but make sure you read the EULAs before using any of those just to make sure.

Graublau Sans Web ↓

Fertigo Pro Regular ↓

Tallys ↓

Diavlo ↓

Fontin ↓

Fontin Sans ↓

M+ Outline Fonts ↓

Pykes Peak Zero ↓

Vollkorn ↓

Delicious ↓

Junction ↓

Days ↓

Sniglet ↓

Chunk ↓

Blackout ↓

Gentium ↓

Anivers ↓

CA BND Bold WEB ↓

Axel ↓

Kaffeesatz ↓

Tagesschrift ↓

Further Resources

Here are some other articles and tutorials you might want to read as they offer some pretty valuable information.

• Beautiful Fonts With @Font-Face
• The Potential of Web Typography
• CSS @ Ten: The Next Big Thing
• The @font-face Rule
• Fonts Available For @font-face Embedding
• Using @font-face
• Cross Browser Font Embedding With The CSS3 @font-face Selector

Your Turn To Talk

Do you use @font-face on your site(s)? What made you decide to go ahead and start using @font-face? I’m curious to know what you guys think and to see how and where you used @font-face. :)

Guaranteed SY0-201 preparation is now at your ease. Subscribe for 642-902 testking all in one training kit and also get free assistance for 70-680.