Jul 6, 2011 by Matt | Posted in Design
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 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.
May 23, 2011 by Matt | Posted in Design
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.
May 20, 2010 by Matt | Posted in Design
Here is an example:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cardo">
font-family: 'Cardo', serif;
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.
Oct 9, 2009 by Matt | Posted in Design
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+.
Next you include the minified Cúfon script, and the font JS file, then call the Cufon.replace() function.
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.
Aug 17, 2008 by Matt | Posted in Design
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.