Ten Great Free Fonts Cross-Browser
for cross-browser @font-face embedding in Firefox 3.5+, Safari, Opera 10.5+, IE 6, 7, 8, and Chrome.
This page is derived from 10 Great Free Fonts published by Ralf Herrmann. (See the companion post on Readable Web). Fonts originally in the OTF format have been prepared to render in Internet Explorer, too. All of the @font-face related CSS is the same as the original page demonstrating that, as long as the fonts are properly prepared, the @font-face implementations in IE, Firefox, Chrome, Safari, and Opera are highly interoperable. Notes on this are at the very bottom of the page. Also, to avoid boredom, I updated most of the quotations. And I played around a bit with font sizes just for kicks and giggles. Much thanks to the type designers involved for making their work available.
1. Pykes Peak Zero
People who design for print are very stable people, people who design for the web aren't.
6. Fontin Sans (regular/italic/bold/bold italic/small-caps)
2. Graublau Sans Web (regular/bold)
...it’s somehow ironic that at the very moment, when webfonts become finally useable across all major browsers, the foundries are trying to invent a new format that will take probably 6 to 8 years until it reaches the same level of support that EOT and TTF/OTF have today. Or as someone on a German blog put it: “The type foundries are standing on the platform arguing about the seating arrangements while the train has already left the station”.
3. Fertigo Pro
It’s high time that font foundries and type designers stopped waving their hands in the air proclaiming the death of their industry … Instead they should see this as an opportunity to be grabbed with both hands.
While it always takes awhile for people to figure out how to best take advantage of a new capability. That means, a lot of @font-face misuse in the beginning – and yes a lot of ugly. But that’s the only way we’ll get to beautiful. The converse is also true – a nicely drawn face like Helvetica Neue can still be asked to do some very unfortunate things.
5. Diavlo (light/black)
The web is not your enemy. It is an ENORMOUS new market for you to break into. Sure, your font will get downloaded by some college kid somewhere and used on their flyer, or maybe it would even be outright pirated by greedy people for personal gain. There is no way to prevent this from happening even now.
7. Fontin (regular/italic/bold/small-caps)
What I do know for certain is that within a few years, web fonts will be a reality for the average viewer and the average web site. Many or even most web sites will pick specific fonts that aren’t necessarily already on the viewing computer, and those fonts will get used to display the desired text. font selection will become part of branding for the web the way it has been in print.
8. Kaffeesatz (thin/light/regular/bold)
@font-face has the potential to revolutionize the type industry, if only designers drive for the change to occur. Expect to see new foundries who specialize in embedding licenses running circles around the monolithic type houses,
until the big boys can catch up.
Working designers who maintain brand identities only scratches the surface of what’s happening on the web today. Social media has blurred the distinction between publisher and consumer. There are an estimated 184 million blogs in the world today, all of them building a unique voice and identity.
“Some of the font designers who spoke still seemed to have this quaint idea that their customers were the "printing and publishing industry". While that may have been true in the past, the reality is that now, with the Web and email, everyone's a publisher.”
- Posted after attending a conference sponsored by the Font Designer's Rights Coalition
Notes on conversion to EOT for Internet Explorer: The original page used only OTF font files which cannot be displayed in IE. Even if they could, they would render poorly at certain sizes. This is not a situation that is unique to IE. It's a Windows thing, generally. If you view this page in Chrome, Firefox, Safari, or Opera 10.5+ and scale down in Zoom (which actually changes the font-size, rounded to the selected Zoom level) you will see that Fontin Sans, Grablau Sans Web, and Tallys, for example, quickly start to break down in visual quality at smaller sizes. For IE9 there has been talk of much better rendering of OTF fonts. But today and for the foreseeable future, IE 6, 7, and 8 require TrueType fonts (TTF) re-formatted as EOT (Embedded Open Type) files. The conversions were handled using two tools: 1) TypeTool 3 from FontLab 2) EOTFAST 1.0 from EOTFAST TypeTool is a basic font editing application that costs $99. In addition to conversion from OTF to TTF, the one indispensible feature it has is Auto-Hinting which, in TypeTool, is a blunt single-click version of the more full-featured hinting feature in editors like the professional FontLab Studio. But still, with a single click, it will greatly improve the look of a TTF font that has been converted from an OTF. It is no substitute for a skilled hinting job - that requires a bit more effort and expense - but the point here is to demonstrate that even with rudimentary tools, fonts can be converted and look good. The only outright auto-hinting failure on this page is the font Tallys. Now, if a skilled hinting job is done - the fonts will look good consistently at different sizes and the file size of the resulting TTF won't be as large. (Like I said, TypeTool's Auto Hinting is a blunt instrument - it adds hinting data to everything it finds. But thankfully, hinting data is highly compressable, and EOTFAST trims the file right back down.) EOTFAST is a free tool for creating natively compressed EOT files. ** One other option that I have yet to thoroughly test - but I will, and post the results - is Font Squirrel's Generator. Which uses the free FontForge on the server-side, it will convert from an OTF to a TTF and there are auto-hinting options available. I tried it in hopes of improving the font Tallys. TypeTool wasn't very successful with it, but Font Squirrel's generator didn't do any better, just different. For all I know, Tallys might present some special problems. So, by all means check out the OTF to TTF conversion at Font Squirrel and the hinting, too. Notes about the conversions for this page: This page is unusual in that it's a "demo" page featuring many @font-face fonts on one page. There are five font-families with more than one member, and five single member families. (For more information about @font-face in IE, see the documentation accompanying EOTFAST) Here's the issues that were dealt with: 1) The Pyke's Peak font had some info in the name table that was over the 5000 byte (2500 char) limit. Changing this is optional, but in the interest of absolute certainty, it was changed. 2) The Fontin Sans font was named, internally, Fontin Sans Rg for some reason and this had to be changed. (Note to type designers: If you care about the half a billion or so IE users in the world and you'd like to see your work made available to them, too, please name your fonts internally so that the Full Name (ID 4) entry in the name table starts with the string defined in the Family Name (ID 1) entry. Font naming in OpenType is a screwy business anyway, this imposes no hardship, nothing is sacrificed. Whether or not you are providing the EOT or your licensing permits customers to do the conversion, it must be this way or else the EOT won't work. There is no arguing with an installed base numbering in the hundreds of millions. 3) There currently is no way to elegantly include a Small Caps font in a font-family. This is true in any browser, not just Internet Explorer. It's a disconnect between @Font-Face and the OpenType spec. On this page, in the two instances where a Small Caps font is used, Fontin Sans and Fontin, the Small Caps font was included in the family by declaring it as Bold Italic. While I think it would have been clearer and better practice to break it out into its own single member family, the educational purpose of this page was to leave the CSS as it was and demonstrate that the fonts could be successfully integrated to work interoperably across all browsers, so I just made sure that the fonts were, internally, Bold Italic so that IE<9 would treat them as such. A similar situation arose with the font Kafeesatz. The Thin weight was declared as Regular (normal), the Light weight was declared as Italic, the regular weight was declared as Bold, and the Bold was declared as Bold Italic. Kind of a dysfunctional font-family, but I went with it and, as you can see, it works fine. (Is anything in web technologies simple and easy and straightforward? Get out your hatchets, boys and girls.) 4) There were a couple of errors and inconsistencies on the original page. The p tag containing the Fertigo font had a closed but no open <strong> tag so I got rid of it. And the Diavlo font doesn't feature all the weights listed - light/book/medium/bold/black - just Diavlo Light and Black. So I changed that. That's it. Lookin' good in IE, too. One piece of advice, at least for the moment: If you're using @font-face, stay away from extremes - very big or very small sizes. Well-hinted TTF's will do best at staying readable at small sizes in Windows in all browsers, OTFs will do better at very large sizes in Windows in browsers *other* than IE. Don't make assumptions. Look at it in multiple browsers and platforms. Richard Fink