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

  1. says

    @dlv: Thanks a lot! Nilland is a pretty cool one! :)

    Oh by the way, not all the fonts in this post are free.For example, the Axel font family is $79 (worth every penny in my opinion) Cheers!

  2. Femke says

    “[] Helvetica and Georgia. They’re great and I used them all the time since they’re web-safe fonts.”

    I’m very sorry to be the barer of bad news and you will have to revisit all the sites you produced containing Helvetica which you use all the time. Unfortunately Helvetica is NOT a web-safe font at all.

  3. says

    Thank you for this rich resource of @font-face fonts. I’ve always been a little hesitant to try it because of IE’s EOT but this makes everything easy to understand.

  4. says

    I like the sound of this @font-face, but because of its cross-browser issues I doubt I’d use it widely until it’s given more support (sadly the case with a lot of css3 stuff) . Thanks for the explanation of how to work with it though, it’s definitely something worth knowing about, thanks! These are some lovely fonts !

  5. says

    Oooo! This has me very excited! While I don’t think I’ll give myself a headache trying to use it now, I’m eager to see how this will evolve! Thank you for posting!

  6. says

    Awesome. This is LITERALLY what I was looking for today. I went to bed last night saying “tomorrow, I need to figure out which fonts I can use”.

    I think the MGOpen fonts would fit well on this as well, but I haven’t combed through the EULA to be able to stand behind that: http://www.zvr.gr/typo/mgopen/index

  7. says

    Nice collection of fonts except maybe the last one, one thing that would be good to see when picking a font is how it looks in a paragraph.

    Because @font-face allows seamless integration of the font it is much more widely considered as a font for all not just titles and headings.

  8. says

    Thank you for sharing this tip (and these fonts).
    I’ve been looking (and until now, never finding) for monthes for alternative ways to display “custom” fonts to the classical and not-so-clean siFR trick. You made my day.
    Once more, it’s a shame that this property is not naturally compliant with all browsers. In other words, I mean that it’s a shame that some web browsers still need hacks to display things like they should do so, from the start.
    Though, the solution is pretty simple here, and that’s great. :)

  9. says

    Good post, I use Museo Slab on my site. Did you test these fonts in Internet Explorer? Some fonts look absolutely horrid in IE. The font I use looks bad, but not as bad as some I’ve seen.

Trackbacks

  1. 21 Awesome @font-face Embeddable Typefaces…

    The 2 most popular typefaces used on the web today are surely Helvetica and Georgia. They’re great and I used them all the time since they’re web-safe fonts. But what about the @font-face CSS property?…

  2. […] 21 Awesome @font-face Embeddable Typefaces “The 2 most popular typefaces used on the web today are surely Helvetica 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. But what about the @font-face CSS property?” […]

  3. […] October 2, 2009 What the Font is a great little secret weapon for those tasked with the challenge of recreating ANY graphics with specific fonts in them. Identifying fonts has always been a weakness of mine. And since I’ve been working exclusively for the corporate world and in the medium of the internet, for the past 12 years, I am even more limited to (and NOT exposed to) cool fonts. Although that is all changing with CSS3. […]

  4. […] How To Use @font-face In CSS And 21 Great Typefaces | SpyreStudios 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. (tags: typography fonts css @font-face webdesign gallery) […]

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *