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 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 ↓

font

Fertigo Pro Regular ↓

font - typefaces

Tallys ↓

font - typefaces

Diavlo ↓

font - typefaces

Fontin ↓

font - typefaces

Fontin Sans ↓

font - typefaces

M+ Outline Fonts ↓

font - typefaces

Pykes Peak Zero ↓

font - typefaces

Vollkorn ↓

font - typefaces

Delicious ↓

font - typefaces

Junction ↓

font - typefaces

Days ↓

font - typefaces

Sniglet ↓

font - typefaces

Chunk ↓

font - typefaces

Blackout ↓

font - typefaces

Gentium ↓

font - typefaces

Anivers ↓

font - typefaces

CA BND Bold WEB ↓

font - typefaces

Axel ↓

font - typefaces

Kaffeesatz ↓

font - typefaces

Tagesschrift ↓

font - typefaces

Further Resources

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

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.


Comments:

Scroll back to the top
Content


Receive the top stories from SpyreStudios and the Splashpress Media network every week, right in your Inbox. Relevant and timely content is yours for FREE!