Stunning CSS3
A Project-based Guide to the Latest in CSS
Where to Find Fonts that Allow @font-face
Embedding
This article is an excerpt from Chapter 3 of the book Stunning CSS3: A Project-based Guide to the Latest in CSS, but is kept continually updated. It was last updated in November 2012.
For more updated articles from the book, go to Resources. You can also learn more about the book and download sample chapters.
Unfortunately, most fonts’ licenses were not written with @font-face
in mind, so when you read through a font’s license, it may not say anything about not embedding fonts. Lack of a restriction doesn’t mean you have a free pass to use the font. It’s best to err on the side of caution and not use the font unless it explicitly says that web embedding or redistribution is OK.
This is the case even with free fonts. Just because the font vendor gave you the font for free doesn’t mean you can redistribute it. Same thing with the fonts that came with your computer. Again, you have to check the license to be sure.
Luckily, there are many places online to find fonts whose licenses allow web font embedding:
- The League of Moveable Type is a small but growing collection of free, open-source fonts that are specifically provided for
@font-face
use. - The Webfonts.info wiki has a page called “Fonts available for @font-face embedding” that lists fonts (mostly free) whose licenses permit embedding. But like most wiki pages, it’s not always as up-to-date and comprehensive as it could be.
- Font Squirrel provides a large collection of free fonts whose licenses allow embedding. It also provides some handy tools for working with
@font-face
, as we’ll talk about in a bit. - Google Web Fonts is a huge library of free, open-source fonts for embedding. You link to one of the fonts on their server using the Google Fonts API, which has a number of advantages. But you can also download the fonts and host them yourself.
- Most of the fonts available at Kernest are free, and all are specifically provided for
@font-face
use. Some are hosted by Kernest, but most you can download and host yourself. - exljbris and Fontfabric both provide a number of fonts for free that can be embedded on the web, as long as you provide attribution according to the terms in the EULAs.
- Some of the fonts from Lost Type Co-Op are allowed to be used with
@font-face
, indicated with a badge on the font's page. You get to choose the price you want to pay—yes, even zero dollars—for each font they offer. - All of the fonts at Fonthead are allowed to be used with
@font-face
, as well as other text replacement methods. - All of the free fonts at Ten by twenty are allowed to be used with
@font-face
, but you're not allowed to embed the paid fonts. - FontSpring and MyFonts both sell fonts that can be used both in a traditional way on your computer and in print work, as well as embedded on the web with
@font-face
. You pay an additional fee for the web version of the font. - FontShop has created web versions of several fonts, called Web FontFonts, that you can buy separately from the traditional versions. Process Type Foundry also gives you the option to buy web-only versions of their fonts.