10 Great Free Fonts for @font-face embedding

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)

43 Comments

  1. Brett 2008/08/05 at 7:34 PM #

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

  2. Affordable Web Design 2008/08/09 at 1:34 AM #

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

  3. paresh 2008/08/09 at 5:29 AM #

    great typopgraphy, thanks for sharing.

  4. Charles Forster 2008/08/11 at 1:05 PM #

    Graublau isn’t free.

  5. ralfherrmann 2008/08/11 at 1:41 PM #

    Graublau isn’t free.

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

  6. pitje 2008/08/11 at 5:00 PM #

    please define ‘soon’

  7. ralfherrmann 2008/08/13 at 7:53 AM #

    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.

  8. johno 2008/08/13 at 2:24 PM #

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

  9. Pxl_Buzzard 2008/08/16 at 2:35 AM #

    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.

  10. projectgrafix 2008/08/16 at 11:58 AM #

    #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 :)

  11. Emma Best 2008/09/02 at 2:43 PM #

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

  12. Bill Canaday 2008/09/04 at 7:17 AM #

    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.

  13. David Dickey 2008/09/26 at 3:08 PM #

    Are browsers going to use kerning information?

  14. ralfherrmann 2008/09/26 at 5:34 PM #

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

  15. ksng 2008/10/26 at 1:04 PM #

    Well article and well resources, thanks a lot!

  16. Amanda Evans 2008/10/29 at 8:38 PM #

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

  17. Bill 2008/12/02 at 11:19 PM #

    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,

  18. ralfherrmann 2008/12/03 at 7:41 AM #

    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

  19. Snooper 2009/01/10 at 1:41 AM #

    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

  20. nev 2009/04/29 at 12:08 AM #

    Hi all the fonts are good . we love the batman font

  21. Scarf*oo 2009/05/20 at 7:27 AM #

    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.

  22. Hardy 2009/05/20 at 10:54 AM #

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

  23. Neefra 2009/05/20 at 12:23 PM #

    WAOOOOO……………..
    NICE FONTS DESIGNZZ

  24. Richard Fink 2009/05/21 at 12:44 AM #

    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.

  25. ralfherrmann 2009/05/21 at 5:31 AM #

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

  26. gwynne 2009/05/22 at 11:50 AM #

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

  27. web services 2009/05/22 at 12:05 PM #

    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.

  28. David Evans 2009/06/02 at 8:12 PM #

    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.

  29. ralfherrmann 2009/06/02 at 8:17 PM #

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

  30. qamarneo 2009/06/03 at 5:44 AM #

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

  31. Patelligence 2009/06/04 at 6:35 PM #

    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!

  32. paul 2009/06/11 at 9:00 AM #

    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

  33. ralfherrmann 2009/06/11 at 9:06 AM #

    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.

  34. Divya 2009/06/12 at 1:05 PM #

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

  35. lee norwich 2009/06/16 at 12:29 AM #

    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?

  36. Sam 2009/06/25 at 5:37 PM #

    Thanks so much for sharing these great font with us, Graublau Sans Web is my favorite.

  37. ed hardy 2009/08/04 at 9:10 AM #

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

  38. Webdesign Agentur 2009/08/30 at 7:58 PM #

    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?

  39. ralfherrmann 2009/08/31 at 7:52 AM #

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

    See http://www.webfonts.info

  40. NIFT 2009/09/19 at 6:06 AM #

    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!

  41. Flash Designers UK 2010/02/23 at 2:39 PM #

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

Trackbacks/Pingbacks

  1. Embedden Sie jetzt! | Code Candies - 2009/06/30

    [...] 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 [...]

 

Leave a Reply


*

More in Typography, Web Design & Webfonts (100 of 118 articles)