@font-face and 15 Free Fonts You Can Use Today

Fonts are a huge part of design (as we all know). Text on the web needs to be much more dynamic than in any other media. We have solutions like Cufón, sIFR, etc. but perhaps one of the better options is using @font-face in CSS.

We’ll take a quick look at using @font-face in CSS and 15 great free fonts you can start using today.

What is @font-face?

@font-face is a CSS rule that lets web designers link to a font that visitors may not have installed. Using this, we can get around the problem of web-safe fonts as well as prevent creating additional dependencies in other methods such as Cufón, sIFR, etc.

Once the font is linked, it is used just like you would use any other font in your CSS. Imagine the possibilities! Unfortunately, there are concerns from many font foundries and others that is currently limiting the use of this rule.

You MUST be sure the font you intend on using is appropriately licensed for @font-face linking/embedding.

Why Use @font-face?

@font-face doesn’t rely on any technologies other than good’ol CSS, the font file you want to use and a capable browser. Other technologies such as Cufón and sIFR rely on JavaScript and Flash.

Browser compatibility is getting much better too. Currently it is supported in Firefox 3.5+ (I’ve heard 3.1+), Safari 3.1+, Opera 10 and Internet Explorer 4+. Yes, it’s been supported since IE4!

While that still leaves a lot of web users without @font-face support, it’s okay because they will just get another font in your font stack. Plus, Firefox, Safari and Opera users tend to upgrade their browsers much faster than Internet Explorer users so at least we won’t have to wait on IE with this. ;-)

Using @font-face (Firefox, Safari, Opera, Chrome)

Before I get started, bookmark this resource. CSS Fonts Module Level 3 via w3.org

Using the @font-face rule is pretty simple. We’ll link the font(s) and specify format and style. Then apply the newly linked font family to the elements you want. I’ve done the h3 tag as an example using a class of “droid”. In the example, I also specified a normal font weight so the heading doesn’t default to bold.

@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Regular.ttf) format("truetype");
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Italic.ttf) format("truetype");
	font-style: italic;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Bold.ttf) format("truetype");
	font-weight: bold;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-BoldItalic.ttf) format("truetype");
	font-weight: bold;
	font-style: italic;
}
 
h3 { font-weight: normal; }
h3.droid { font-family: "Droid Serif", serif; }

Here’s what we get. The first 4 examples are just default as shown in Safari. The last 4 examples are the Droid Serif font family.

Droid Font Family Example

@font-face Font Formats

You can use OpenType (“opentype”, .otf) and TrueType (“truetype”, .ttf) in Firefox, Safari, Opera and Chrome but not in Internet Explorer. We’ll need to specify separate rules for IE.

Using @font-face in Internet Explorer

While Internet Explorer was an early adopter of @font-face, they decided to go with a more proprietary format (Embedded OpenType, .eot). So, we’ll need to specify the @font-face rule before the rules for the other major browsers. We also don’t need to set the format because IE will only use .eot fonts.

@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Regular.eot);
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Italic.eot);
	font-style: italic;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-Bold.eot);
	font-weight: bold;
}
 
@font-face {
	font-family: "Droid Serif";
	src: url(DroidSerif-BoldItalic.eot);
	font-weight: bold;
	font-style: italic;
}
 
/* Other major browser rules come after IE rules */

And there you have it! Custom fonts for your websites, designs, etc. without all the hassle of JavaScript and Flash dependent solutions.

Converting to EOT Fonts

If you found a font that is licensed to be used with @font-face linking but is only provided in TrueType (.ttf) or OpentType (.otf) formats, fear not. They can be converted (but make sure the license permits it).

Microsoft WEFT

Microsoft provides a tool which will convert fonts to .eot. However, I haven’t used it and I’ve read that it’s a little tricky to use.

ttf2eot

There is a small command line utility called ttf2eot that is quite easy to use, hosted via Google Code.

A few people have setup an online version of ttf2eot as well.

If you need to convert from OTF, you’ll need to use FontForge to convert to TTF then use ttf2eot to convert to EOT. I know, it’s a bit of a pain but it’s better than nothing! :-)

Update: You can also use http://onlinefontconverter.com to convert TTF, OTF or DFONT font files.

15 Great Free Fonts for @font-face Linking

Please remember to always check the license before using any fonts.

1. Museo Sans

2. Quicksand

3. Delicious

4. Vollkorn

5. Andika Basic

6. TitilliumText14L

7. Zag Regular

8. ChunkFive

9. TypoSlabserif

10. Whitehall

11. Xenophone

12. Daniel

13. Sansumi

14. Journal

15. Miama

Additional Resources

If you’re looking for more information and/or fonts, here are a couple places to look.

As I’ve already said, please check licenses before using fonts.

If you know of any great font resources, please share them with us in the comments below. Thanks for reading! :-)


43

Comments
  • Tylor says:

    Awesome! This is exactly what I have been looking for. I haven’t been able to take the time into looking at the licenses and having them already listed here is amazingly helpful! Thanks :)

  • Steve Mullen says:

    Great article. I have been using Quicksand on my personal site for a little while now. I did not know about the IE option though! Thanks for sharing, I will have to go add the rules for IE soon.

  • sven says:

    really cool.

    oh yeah, fiiirst

  • Andrew says:

    Great article!! Some nice fonts there; will use one or two soon!

  • xun says:

    thanks for the font list :)

  • Kevinsturf says:

    thanks Jarel, I had not known it was supported for ie since 4. I guess I can start using it then.

  • Rory says:

    I’ve tried several of the different font-face kits from Font Squirrel and they only seem to work in Firefox 3.5. IE and Chrome just display the default font. I’m using the code provided in the zip file and the example CSS from above — any idea what I might be doing wrong?

  • cintia says:

    Really awesome..! Thanks a bunch!!

  • rzepak says:

    wow, great post! I had no idea it was supported by IE!

  • Sathish says:

    This is extremely useful info for me. Din’t know IE has support from IE4. Thanks.

  • Jason Vail says:

    One potential gotcha that you may need to keep in mind is the font smoothing aspect. This can be a problem especially with small type. XP does not come with ClearType enabled by default. While this is simple to enable, it may cause some small text to appear quite jagged if a user doesn’t have it on. With that in mind this is a GREAT option for headers and other large text.

    Here is a great link to provide your users for Windows/IE users to enable ClearType.

  • Max says:

    Hey, first off thanks for the great post. I’ve never used @fontface before and this is a great introduction. I did notice, however, that it doesn’t seem to work in Chrome 2.0.172.43. I’m using a .ttf and am setting it up exactly as you showed above. Any suggestions?

  • Marko says:

    Came just at the tight time. Thanks.

  • GDevelop says:

    Thanks for this useful information. But what’s the other way round.
    Can’t you use Embedded Open Types .eot files for the other browsers expect IE?
    Did i miss sth?

  • Paul says:

    I note in your code, you have bold, italic and bold italic for IE, but at the Font Squirrel site, the info on there @font-face kits page states “Please note that the IE CSS declarations do not have Bold, Italic, or Bold Italic variants because they are not supported. These EOT files can only display one font from the family.”

    Could you please explain this discrepancy?

  • wrerm says:

    Nice articl! Wish someone had written something like this when I originally started to use this (It’s been around for a minute).

    I’ve used WEFT3 before but I find it hard to test sites when you have the font installed. What I would really love to see if a demo and an app that works on a mac to convert from ttf to eot.

    I’ll try the font’s from you list and see how it works for me. I’m also keeping a watchfull eye on CSS3 to see if this will be developed any furthur and which browsers support it.

    Thanks again!

  • Rafael says:

    This is going to be really useful, thanks.

  • Phil D. says:

    Great Article! Really useful…

    Any idea if Chrome supports @fontface?

  • Rata says:

    Awesome.
    Thanks a lot.

    Kind regards
    Rata

  • Dylan says:

    Thanks a ton, had no idea IE supported this for so long.

  • blobkat says:

    I wonder how the font rendering will be in different browsers though, I think a lot can go wrong there. I’ll check it out anyways.

    Does anyone know any good demo pages of this?

    @wrerm: If you’re on a mac you can disable certain fonts very easily in your font catalog for testing. On windows it’s harder, I think you have to delete or move the font file and restart sometimes…

  • sdarknot says:

    como hago para incluir en mi web he probado ese codigo pero no me funciona el archivo .ttf lo tengo en otro servidor

  • randsco says:

    I have a outlined a straight-forward work-flow for converting TrueType Fonts (
    TTF) to EOT (Embedded OpenType), using WEFT, in my x-Browser Font Embedding Tutorial. It’s fairly easy to do. (Sebastian’s online converter isn’t presently working, though the CGI one is new to me, so I’ll have to try that one).

    Nice info on converting OpenType Font (OTF) files, I’ll have to try that. (Oddly, I find FontForge more difficult to use and install than WEFT).

    Cheers and thanks for helping to spread the word that cross-browser font embedding has come of age!

  • Jarel says:

    Thanks for the comments everyone! :-)

    I’ve asked for the article to be updated with a touch of additional info. but I’ll post it here too. At http://onlinefontconverter.com you can convert ttf, otf and dafont font types to each different type. So ttf -> otf, etc.

    This means no desktop application required! You can go from otf -> ttf using the site above, then ttf -> eot using one of the sites mentioned in the article. :D

  • Meshach says:

    While that still leaves a lot of web users without @font-face support

    Why is that? If it’s supported by IE4+ why would that “leave a lot of web users”?

    Thanks for any info..

  • Dan says:

    All the other browser support except for IE is only relatively recent. These days IE makes up a much smaller part of the browser market.

  • Jarel says:

    @ Rory – For IE, you’ll need to make sure you have an EOT version of the font. I don’t believe Chrome supports @font-face just yet but it will very soon.

    @ Max – See above comment.

    @ GDevelop – No, EOT files will not work in non-IE browsers.

    @ Paul – Thanks for bringing that to my attention. I didn’t notice that before. I did a little testing and it seems to make a difference for me. The type looks much better (in my opinion) with the way I have setup the CSS. IE may not directly support it but it seems to work normally for me in IE 6-8 so I’ll be keeping it the way shown above for the time being.

    @Phil D. – Not yet but soon. It can actually be turned on in current versions of Chrome. Just do a quick Google search for it.

    @Meshach – It’s supported for IE4+, Safari 3.1+, Firefox 3.5+ (although 3.1 seems to work for me as well) and Opera 10 (chrome very soon too). The problem is that anyone using a non-IE browser that is older than these listed versions will not get @font-face support. There are a lot of people who haven’t updated to Firefox 3.5 and there are a lot of people that use Chrome. Fortunately, most of these people are likely to upgrade much, much sooner than people that use IE. So, it’ll be less of a problem as time goes on.

    - -

    Thanks again for the comments everyone. :-)

    If anyone has questions related to this article, please feel free to leave a comment here but you’re also welcome to email me at jremick@jremick.com

  • Peter Lehto says:

    Great Article!

    Thanks for the info. I’m going to use @font-face for my next project.

  • IgnacioRV says:

    Thank you! Didn’t know something like @font-face existed. Really cool, going to try it on my new project…

  • IgnacioRV says:

    Cool, didn’t know something like @font-face existed (I still don’t believe it’s compatible with IE xD ).

    Going to use it on my next web project ^^

  • I’ve known about this for ages but never actually tried it. Thanks for the resoucre of fonts too, bookmarked!

  • Very nice and useful article. Ty

  • Teddy says:

    This is just an awesome news for designer!
    Really good fonts examples.

  • Sarah says:

    Great Article! Just what I needed right now.

    So can one safely say this could be used instead say Cufón?

  • Sarah says:

    Great Article! Just what I needed right now.

    So can one safely say this could be used instead say Cufón?

  • Skeku says:

    If only someone designs wonderful types like these…but with “ñ” for spanish people :D

  • randsco says:

    Jarel, you will want to update your CSS code. Having TTF and/or OTF @font-face selectors after IE’s EOT @font-face selectors will toss 404 errors on the server.

    Superior @font-face Syntax

    (follow the link in this comment for details).

    Hope this helps.

  • Scott says:

    I can’t believe I didn’t know about this earlier. Great fonts too!

  • Nano says:

    Why won’t anyone mention that using this method your visitors will have to download fonts that can me be really big files. Is this something the visitor should have to be put through or better yet can you afford the extra bandwith.

  • really nice way to use fonts with css good tutorial .

  • i have to get into this PDQ – thanks for the list. you’ve moved this up my To-Do list!

  • Forester says:

    Good, thx!