Tag Archives: fonts

Where to Find Free Fonts for CSS @font-face

Jul 6, 2011 by Matt | Posted in Design 4 Comments

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.

The League of Moveable Type

May 23, 2011 by Matt | Posted in Design No Comments

Looking for some high-quality open source fonts, perhaps to use with @font-face? Look no further than The League of Moveable Type, an organization that curates a collection of professional typefaces licensed in a way that doesn’t inhibit your ability to use them on the modern internet.

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

Their blog also occasionally links to other open fonts, along with other things of interest to typography nuts.

The current selection is impressive, though there are currently only 14 or so typefaces at this time. I’m particularly a fan of League Gothic and Goudy Bookletter 1911.

Google Font API

May 20, 2010 by Matt | Posted in Design No Comments

Google is taking on projects like sIFR and Cufón with their new Google Font API. A simple line of JavaScript lets you load a font family from their directory of open source fonts, allowing you to safely reference it within your CSS.

Here is an example:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo">
<style type="text/css">
body {
font-family: 'Cardo', serif;
font-size: 24px;
}
</style>

It’s simple, and it looks like it works cross-browser pretty much. Hopefully we’ll be seeing more supported fonts in the future. And please, don’t abuse Lobster until it becomes the next Comic Sans.

Cufón JavaScript Font Replacer

Oct 9, 2009 by Matt | Posted in Design No Comments

Cufón is a neat font-replacement script that has been gaining popularity of late. It’s easy to set up, and works in modern browsers, and IE6+.

Cufon on ProBlogDesign.com

To use a custom font on a web page, you first run a TTF or OTF font file through the generator on the Cufón website (or your own instance of the generator), which will convert the and generate a JavaScript file named after the font.

Next you include the minified Cúfon script, and the font JS file, then call the Cufon.replace() function.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Copperplate_600.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>

Easy enough. The only downside is that the text won’t be selectable after the replacement.

You can read more about Cúfon in the documentation.

36 Font Resources

Aug 17, 2008 by Matt | Posted in Design No Comments

Everyone likes fonts. From the days of the IBM selectric, with it’s swappable type spheres, to the introduction of the Macintosh, which brought zillions of typefaces to the personal computer, people have loved playing with fonts.

Fonts are a big part of graphic design, and people who deal with them on a regular basis often become obsessed with typography. There are typography blogs, typography T-shirts… A little crazy isn’t it? I think I’d get some odd looks if I went around wearing an “I heart Helvetica” T-shirt…

Now, let’s get to the font resources. I was browsing through Del.icio.us earlier, and found this post here: 36 Font Resources You Should’ve [sic] in Your Bookmarks. Prepare to lose a few hours downloading new fonts.