How to use @font-face

and

21 Awesome @font-face Embeddable Typefaces

The 2 most popular typefaces used on the web today are surely Verdana and Georgia. They’re great and we used them all the time since they’re web-safe fonts. we use them mostly because we are 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.