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)
Nice summary. Having real small caps makes me more excited than it probably should.
Interesting set of fonts. I’m eager to see well the new technology will play out in the other browsers. Thanks for posting!
great typopgraphy, thanks for sharing.
Graublau isn’t free.
The “Graublau Sans Pro” family isn’t, but the two styles “Graublau Sans Web” regular and bold are.
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.
Great that you’ve shared them here, and that you’ve gone to the trouble of creating a demon page. Thanks.
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.
#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
Nice set of fonts. I like no. 5 and 7 the best. Thanks for sharing
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.
Here are code examples:
http://www.webfonts.info/wiki/index.php?title=%40font-face_support_in_Safari
Are browsers going to use kerning information?
Firefox 3.x already supports kerning. Webkit/Safari could use it, but the developers claimed they turned it off for performance reasons.
Well article and well resources, thanks a lot!
What a great set of fonts. These will definitely come in handy when I get around to redesigning my website. Thanks for sharing.
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,
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
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
Hi all the fonts are good . we love the batman font
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.
Free fonts are always a great thing. And these fonts are awesome. Thank you!
WAOOOOO……………..
NICE FONTS DESIGNZZ
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.
That’s why I say “10 great headline fonts” in the article …
some really nice fonts in there!.. thanks.
i particulary like 8. Kaffeesatz. will use it soon on a website design i should imagine!
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.
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.
The specs are here, since 2002:
http://www.w3.org/TR/css3-webfonts/
This collection is really nice. I will be using a couple of them in my upcoming project. Thanks
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!
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
You should upload them to your server and link them from the CSS file.
this list is really helpful..and would love to sue these fonts. esp the 4th one
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?
Thanks so much for sharing these great font with us, Graublau Sans Web is my favorite.
This collection is really nice. I will be using a couple of them in my upcoming project.
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?
See http://www.webfonts.info
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!
Really a great list definitely use them in my up coming projects. Some of them really inspire me