Ethan Dunham about Fontspring: "Designers should have control over their fonts".

Putting the quality free fonts in the showroom

Although the website has about 1.5 million page views per month, the website is just one year old. Fontsquirrel was born in January 2009 because Ethan, for years a font designer himself, wasn’t happy with the way free fonts were offered on sites like dafont.com. “There are no free font sites that really focus on quality. What they focus on is quantity,” as Ethan said in an interview for the Web 2.0 Show.

With Fontsquirrel he wanted to fill in that gap. He only selected free fonts that could also be used in commercial products like websites and were “at least half way high quality”. That way the users of Fontsquirrel had a list of quality fonts that could be used in almost anything.

A good start

Ethan had little expectations when he started Fontsquirrel: “I started it as a side project, maybe earn a few dollars on advertising. It was a site I wanted for myself and thought it would be useful to others.” The response was great after the release of Fontsquirrel: “It made it to the front page of delicious.com, right off the bat.”

After a year Ethan has found more than 630 font families that fitted his criteria. The active search has stopped now and new fonts only trickle in from time to time. “But that hasn’t been a problem for the popularity for the site. If you now need a font for your site, you have a place to go to.”

Not all fonts on Fontsquirrel are available as a webfont though. This has to do with licensing issues. Ethan: “I am either not allowed to redistribute fonts (and therefore webfonts) or the license doesn’t allow it.”

Jeffrey Zeldman

The popularity of Fontsquirrel is still growing with 5% to 20% a month. The online media certainly is boosting the trend. Ethan: “There lots of people dropping my name. Jeffrey Zeldman in particular was kind enough to mention me in some blog posts and tweets.”

Because of Jeffrey Zeldman’s popularity and his status as an authority on web development, Ethan was even a bit affraid of his posts since they result in peaks in site visits that the server has to handle. “The problem is that the generator can be processor intensive. Just putting one font through that thing can tie up the server. So I’m a little anxious about getting more and more traffic to the generator. It could end up eating all of my resources.”

“The website is on a decent server, but people are uploading megabytes of fonts. I had one guy asking me why his 20 megabyte font wasn’t converting very well!” Another problem were grunge fonts with tons of vector points that were being run through the auto-hinter. But these problems are now hopefully gone forever: ” I just built in some limitations to keep things humming along. I will not be able to serve all 100% of the people coming, but 90% of you won’t notice a thing.”

Why we need the @font-face generator

Most developers who ever tried to use web fonts in their web site, will most likely know how much trouble one has to go through. You’ll have to at least convert an existing font to EOT and already that can be a pain. For years Microsoft has a tool for generating EOT files, which is called WEFT. But WEFT crahes easily and the UI is cumbersome. That’s why many people take their resort in the simpler but more stable commandline program ttf2eot.

Jonathan Snook wrote a blog post about the steps he had to go through to just be able to use web fonts on his site. That inspired Ethan for making the generator: “I had been doing quite a bit with FontForge and I realized how easy it would be if you’d automate most of that. It started off there, just for fun, and it progressively grew more and more features.”

The @font-face Kit Generator: currently the only complete web font generator

The font face generator can do a lot of conversion now. And it has to: if you want to do it right, you’ll need 4 file types: TTF or OTF for most browsers, EOT for Internet Explorer, SVG for Safari on the iPhone and finally WOFF, the new standard for web fonts.

Under the hood of the generator

FontForge is still a large part of the Ethan’s generator. “I wrote a script that uses FontForge from the command line. But it is also integrated with a few other open source tools. Obviously it is connected to ttf2eot te generate an EOT. Another tool is sfnt2woff for the WOFF files.” The generator now also produces an SVG file, which Safari on the iPhone needs.

No future for Cufón

The @font-face generator even makes a Cufón file. Cufón is a hack to make a browser show non-standard fonts. It uses Javascript to replace text with a line drawing of the font. Cufón aims to be a worthy alternative for the other hack: sIFR.

The fact that the @font-face generator creates Cufón files does not mean Ethan is endorsing it: “I don’t think there’s much of a future for Cufón. It was easy to add to the generator. I did it just for fun. Simo Kinnunen released the Cufón generator as open source, and I just plugged it in to see what happens. So I didn’t spend much time on it. But some people use it instead of @font-face. They think it renders more smoothly.”

Although there seems to be no future for Cufón, it has some advantages over @font-face: Cufón does render well on Windows in contrary to @font-face. We’ll have to wait for IE9 to see good font rendering on Windows browsers. Another advantage of Cufón is that the fonts cannot be pirated, since the original file is not being used.

Future developments for @font-face generator

The work on the @font-face generator is not finished yet. “It’s definitely a work in progress”, Ethan admits. He’s still busy adding new features and tweaks. One of those features is the ability to be able to select alternative glyphs and ligatures: “An OTF can have a normal set of Unicode characters, but it could also have other characters instead of the default. I did come up with a way that you can upload a font and choose which set you want to use. I haven’t implemented that yet.”

The whish list goes on, although Ethan is still in doubt if they’d be useful enough to implement: “You could embed an XML file into a WOFF as meta data, so that you have a font with the foundry information in it. Another thing I’m thinking about is to generate some server-side script to dynamically generate the CSS file, which should send the right font to the right browser.”

…and then there was Fontspring

In early February Ethan published another website: Fontspring. It is something that he had been thinking about for a few years already. “I’ve been in the type business for a long time and wanted to take what I’ve learned selling my own fonts and apply that to selling others.”

The interview for the Web 2.0 show gave him the final push for starting Fontspring: “I shared my observations about what I thought users would like regarding webfonts. Ie: That the idea of renting a font was a bit backwards and that most people would rather have freedom to download and use the fonts as they saw fit. There were a lot of companies jumping into the market and so I dropped everything I was doing and spent 2-3 months building Fontspring.”

“I created a whitepaper describing what it was we were doing and how we could protect their fonts from casual theft. It wasn’t complicated. Small, open-minded foundries said ‘yes’.”

Fontspring.com

Service vs DIY

Fontspring sparked a new discussion about renting versus buying. Most web fonts vendors choose to rent web fonts, while most web developers will most likely opt for buying web fonts. “We are at the owning side of the ‘owning versus renting model’. We think that designers should have control over their fonts and we try to sell it that way. That’s why almost all of the fonts on Fontspring are licensed for unlimited domains. The other advantage is that we’re not just a service: you also get the desktop version of the font.”

Jeffrey Zeldman also has reservations about renting fonts and being dependent on a service. His post on that subject already sparked a discussion on the subject, but it’s most likely that the two business models will live side by side for at least some time.

The DIY model of hosting does not mean that the fonts can be easily pirated. Ethan took some measures to discourage pirating. “I’m trying to do the best of both worlds here. On one hand I want to serve customers who don’t want to be tied to a yearly fee. On the other hand I understand foundries’ concerns about having their intellectual property on the web, all exposed.”

“What I’ve done is take some ideas of existing type services and integrated them in a DIY method. For example: when I make a webfont for Fontspring, I’m subsetting it to a smaller character set. I also removed all the OpenType features, and then scramble some of the internals to render it fairly useless as a desktop font.”

At the time of writing Fontspring is selling 1,044 font families from 36 Vendors. “I’ve actually been pleasantly surprised that the interest level of these type designers for the DIY model is high.” Ethan isn’t finished yet: “Fontspring will continue to sign on new font vendors and improve the quality of the webfonts delivered. I have a list a mile long of improvements to make to the site and user experience.”

More than 1000 font families to choose from

Hinting

All the fonts are generated with the @font-face generator. The font-face generator automatically adds hinting to the font if none is available. The hinting will make the font render better on the screen. Especially Windows browsers need hinting for the rendering.

Different vendors have different approaches to font optimization. Typekit for example does no optimization itself but leaves it up to the designer. The hinting of the fonts on Fontsquirrel and Fontspring are generated automatically, while font foundries like Ascender do all their hinting by hand.

Creating hints by hand ensures the best possible rendering, but that’s no option for Ethan: “Manual hinting is a very niche occupation and takes a lot of time. The automatic hinting does it well enough that you maybe see a few artifacts, but overall it’s gonna be pretty good. Fontspring has more than 1000 fonts. To go through all of them and manually hint them would be impossible. Having to pay somebody to do that would be very expensive obviously.”

A bit about Ethan Dunham

Ethan's avatar on the web

Ethan is a full-time independent web designer in Wilmington, near Philadelphia and has been designing websites since 1996. He also designs fonts for 15 years now. He sells them on Fonthead.com and now also on Fontspring.com.

As a font designer he never worried about the emerging web font technology: “I was one of the first to change the license agreement to allow @font-face. In my experience most people are honest and respect your intellectual property.”

Related posts:

1. My favorite for converting fonts to EOT
2. List of web fonts services and resources

In order to use webfonts in your website you have to convert regular fonts to Microsofts EOT format. Normally I would use the online version of ttf2eot, which works reasonably well. As long if you have a TTF. If you have another type of font like a OTF, you have to find another converter first.

WEFT

In case ttf2eot fails with a particular font (like in my case) I grudgingly use Microsofts WEFT tool. I dislike WEFT for its instability and weird workflow/interface. But last time I tried it, it didn’t do a good job at all. Only 3 of the 4 fonts I had to convert to EOT were recognized and none of that 3 fonts worked in IE.

Fontsquirrel

Then while looking for a manual on WEFT, I came across the free @font-face Kit Generator of Fontsquirrel. And man, did that save the day. Uploading and converting the fonts was very easy. On top of it, you get an example web page packed in a zip with the webfonts in it. It looks something like the screenshot below. The service can also convert fonts to WOFF (Firefox) and SVG (Chrome & iPhone).

Fontsquirrel not only converts your fonts to EOT, but also shows an example how it would look like in your browser in various font sizes.

What to look out for in Fontsquirrel

The only thing that did go wrong was the hinting. If I chose the default option “Use existing hints” the letter “B” did not render well as you can see in the screenshot below. When I chose to remove the hinting, the conversion was successful.

Fontsquirrel too can get it wrong. Always check all the types

The problem in the previous piccture was cleard by removing all hints.

Related posts:

1. The trouble with @font-face
2. Test: Popular professional fonts as webfont
3. List of web fonts services and resources
4. Interview with Ethan Dunham of Fontsquirrel and Fontspring
5. Webfont pitfalls