Where to Find Free Fonts for CSS @font-face

If you’ve discovered the magic that is the CSS @font-face property, then you have likely run into one of its biggest problems: while there are plenty of free fonts online, not many are licensed with terms that allow you to use them with @font-face. A you’re technically “redistributing” the font when you upload it to your web server and reference it in a CSS file, which causes browsers to download it, you run afoul of the fonts’ licenses more often than not.

Fortunately, there are typographers designing fresh new fonts and licensing them with @font-face in mind. Where do you find such fonts? There are a couple of sites that I recommend.

The League of Moveable Type

The League of Moveable Type is dedicated to providing “the most well-made, free & open-source, @font-face ready fonts.” It’s one of my favorite sources for fonts these days, and their collection, though on the small side currently, has only excellent examples.

Font Squirrel

Font Squirrel is a font aggregator, along the lines of DaFont.com, that only lists free fonts available for commercial use, and many that are @font-face ready. They also have a handy generator to convert a TTF or OTF font into the various formats required for the bulletproof @font-face syntax. And they have pre-made “@font-face kits,” too. You can toggle a checkbox near the search bar if you only want to include @font-face ready fonts in the results.

  • http://www.problogdesign.com/ Michael Martin

    The League of Moveable Type is definitely one of my favorites. Great collection of very high quality fonts :)

    I’m looking forward to seeing how the Google Font API grows. It does seem like they’re putting a lot of work into, so with a little luck, we’ll start seeing more high quality fonts.

    Well, one can hope at least!

    • http://www.webmaster-source.com Matt

      Google Font API is nice, too. I’m actually surprised there aren’t more League fonts in their directory. (Just one of the script ones, I think.)

      Font Squirrel’s @font-face tool is awesome, too, if you’re doing fonts with pure CSS instead of relying on a service like TypeKit or the Google API. I used it recently to generate the different font formats (using a League font) required for the “bulletproof” @font-face CSS.

  • http://www.24-the-movie.com/ 24 movie news

    Just started using custom fonts on my Jack Bauer fan site. Everyone should consider using custom fonts that are stored on their server and called using @font face. It works really well.

  • FontsTTF

    Where to Find Free Fonts for CSS @font-face : Fontsttf.com