Readable Web's

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.

David Berlow, type designer and founder of The Font Bureau

6. Fontin Sans (regular/italic/bold/bold italic/small-caps)

While cross-browser deployment isn't ideal, the benefits of utilizing CSS to embed fonts is obvious: It's lightweight; it's valid CSS (CSS3); it's easy to do; it's search engine friendly; it's cross-browser compatible; and (yay) it relies neither on either JavaScript or Flash.

Scott Kimmler

2. Graublau Sans Web (regular/bold)’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”.

Ralf Herrmann

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.

Richard Rutter,

4. Tallys

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.

Garrick Van Buren on the Blog

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.

Cory Mawhorter creator of FLIR on Typophile

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.

Thomas Phinney - Phinney On Fonts

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.

Danny Dawson

9. Vollkorn

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.

Jeffrey Veene on

10. Tagesschrift

“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

Bill Hill, formerly of Microsoft


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

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
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,

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
    (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