10 Great Free Fonts for @font-face embedding

Posted on 05. Aug, 2008 by Ralf Herrmann in Fonts, Web Design, Webfonts

Safari and Internet Explorer already support it*. Firefox and Opera will get it soon: Downloadable webfonts. Here is a collection of 10 great headline fonts you can embed in you website free of charge …

If you use Safari 3.1 visit the demo page (1000 KB).

1. Graublau Sans Web

2. Fertigo Pro

3. Tallys

4. Diavlo

5. Fontin

6. Fontin Sans

7. Pykes Peak Zero

8. Kaffeesatz

9. Vollkorn

10. Tagesschrift

Please visit this Webfonts.info Wiki page to find the download links of the fonts. Don’t forget to check the license restrictions before using any of them.

*) Safari: support for TrueType/OpenType; Internet Explorer: support for Embedded OpenType (EOT)

Tweet This Share on Facebook

43 Responses to “10 Great Free Fonts for @font-face embedding”

Brett

05. Aug, 2008

Nice summary. Having real small caps makes me more excited than it probably should.
Affordable Web Design

09. Aug, 2008

Interesting set of fonts. I’m eager to see well the new technology will play out in the other browsers. Thanks for posting!
paresh

09. Aug, 2008

great typopgraphy, thanks for sharing.
Charles Forster

11. Aug, 2008

Graublau isn’t free.
ralfherrmann

11. Aug, 2008

Graublau isn’t free.

The “Graublau Sans Pro” family isn’t, but the two styles “Graublau Sans Web” regular and bold are.
pitje

11. Aug, 2008

please define ’soon’
ralfherrmann

13. Aug, 2008

please define ’soon’

It’s scheduled for Firefox 3.1 to be released later this year.
Opera had already a build with @font-face support, but it didn’t make it in the final release of 9.5. So it’s very likely to be in Opera 10.
johno

13. Aug, 2008

Great that you’ve shared them here, and that you’ve gone to the trouble of creating a demon page. Thanks.
Pxl_Buzzard

16. Aug, 2008

This would be an awesome feature in Firefox, seeing as it’s the only browser I use. As a web designer, I hate being limited to only a few “safe” fonts.
projectgrafix

16. Aug, 2008

#4 font looks very nice, however using websafe fonts is good for webpages, otherwise most people complain of ugly looking site. For images, any font is good
Emma Best

02. Sep, 2008

Nice set of fonts. I like no. 5 and 7 the best. Thanks for sharing
Bill Canaday

04. Sep, 2008

Okay … I’ll bite. How would I embed these in a web page if the viewer has not already downloaded a copy?

I’m not trolling … I Stumbled in here and this sounds interesting but I wouldn’t know where to begin.
ralfherrmann

04. Sep, 2008

Here are code examples:
http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Safari
David Dickey

26. Sep, 2008

Are browsers going to use kerning information?
ralfherrmann

26. Sep, 2008

Firefox 3.x already supports kerning. Webkit/Safari could use it, but the developers claimed they turned it off for performance reasons.
ksng

26. Okt, 2008

Well article and well resources, thanks a lot!
Amanda Evans

29. Okt, 2008

What a great set of fonts. These will definitely come in handy when I get around to redesigning my website. Thanks for sharing.
Bill

02. Dez, 2008

So if I understand this correctly, this should make sense.
If not please tell me.

Safari and IE already allow this using CSS but only with .oet fonts? (Safari also .ttf)

When Firefox and Opera support this they will only support .ttf fonts?

Will this allow the website maker to use what ever font they like to be used on the website? (as long they are ttf. or .oet)

So when this all happens. Is there away to load the same font in both extension so not only people using firefox will see it, or vise versa.

I have been going through all the developers sites and it seems that firefox is just about to allow this but then I also read about people not even being allowed to use .oet in IE 7

This is all just so confusing right now and I was hoping you could shine some light on this Ralf?

regards,
ralfherrmann

03. Dez, 2008

Safari (from 3.1): OTF/TTF
IE (from 4): EOT
Firefox (3.1): OTF/TTF

If it should work in all of them, you need to provide both versions, one EOT for IE and one OTF or TTF for the others.
You can find more informations on webfonts.info:
http://webfonts.info/wiki/index.php?title=%40font-face_browser_support
Snooper

10. Jan, 2009

What am i missing ? This code is apparently Firefox safe and is to embed a font (from here) .. but its not working ??!!

Font test

@font-face {
font-family: “Fontin Regular”;
src: url(“/Fontin-Regular.ttf”) format(“truetype”);
font-weight: bold;
}

H1 { font-family: “Fontin Regular”, arial }

This heading is displayed using Fontin Regular
This is normal system text

live sample – http://www.ihost4u.co.uk/font.html
nev

29. Apr, 2009

Hi all the fonts are good . we love the batman font
Scarf*oo

20. Mai, 2009

Haven’t jumped on the bandwagon myself yet, but I am feeling the day approaching when I’ll embed my first font on a real site. No 4, 5, 7 and 10 for me, thank you.
Hardy

20. Mai, 2009

Free fonts are always a great thing. And these fonts are awesome. Thank you!
Neefra

20. Mai, 2009

WAOOOOO……………..
NICE FONTS DESIGNZZ
Richard Fink

21. Mai, 2009

None of these fonts is particularly useful except for headings.
None of them useful for body text. They don’t render well at smaller sizes.
ralfherrmann

21. Mai, 2009

That’s why I say “10 great headline fonts” in the article …
gwynne

22. Mai, 2009

some really nice fonts in there!.. thanks.
i particulary like 8. Kaffeesatz. will use it soon on a website design i should imagine!
web services

22. Mai, 2009

Expecting the fonts to be approved for Firefox and Opera, I really love those fonts. Few among them are getting the attraction on the first sight. I will be using some the above in my next web designs.
David Evans

02. Jun, 2009

I cannot believe we are still having this conversation. I think I was embedding fonts in 1999, it was a pain then and given the ongoing fractured nature of the browser wars, unless there is a spec and everyone agrees on it, nothing is going to change.

No way anyone with a large site is going to try and implement this stuff, it’s like the IE box hack all over again. A shame.
ralfherrmann

02. Jun, 2009

The specs are here, since 2002:
http://www.w3.org/TR/css3-webfonts/
qamarneo

03. Jun, 2009

This collection is really nice. I will be using a couple of them in my upcoming project. Thanks
Patelligence

04. Jun, 2009

Thanks for posting this. It is very helpful.
I especially appreciate the second font: Fertigo Pro.
Tallys is pretty sweet, too.

Keep up the good work!
paul

11. Jun, 2009

very nice fonts! like it. do i need to embed these fonts when i publish the site? or is it the case that they will appear in when firefox has them? or already the case that they have them?

thanks a lot
ralfherrmann

11. Jun, 2009

do i need to embed these fonts when i publish the site?

You should upload them to your server and link them from the CSS file.
Divya

12. Jun, 2009

this list is really helpful..and would love to sue these fonts. esp the 4th one
lee norwich

16. Jun, 2009

Great stuff. The font-face embedding really notes a noticable step forward in visual web design, how long until the majority of users can see these fonts though?
Sam

25. Jun, 2009

Thanks so much for sharing these great font with us, Graublau Sans Web is my favorite.
Embedden Sie jetzt! | Code Candies

30. Jun, 2009

[...] die man auch fürs embedding benutzen darf, sonst gibt’s schnell Lizenzärger. Hier gibt’s ein paar freie Schriften, die das ausdrücklich zulassen. Ach ja und zum guten Schluss, sollte man font-size-adjust auf [...]
ed hardy

04. Aug, 2009

This collection is really nice. I will be using a couple of them in my upcoming project.
Webdesign Agentur

30. Aug, 2009

In what browsers exactly will the @font-face property work? I’ve always wanted to know this. I know that it works in the latest Safari, but how about earlier versions?
ralfherrmann

31. Aug, 2009

In what browsers exactly will the @font-face property work?

See http://www.webfonts.info
NIFT

19. Sep, 2009

Usually I’m a little scared of free fonts because of all the tweaking they require but this is a solid little collection. Thanks so much!
Flash Designers UK

23. Feb, 2010

Really a great list definitely use them in my up coming projects. Some of them really inspire me