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

IE9 on Vista on the left and IE8 on Windows 7 on the right. The font is Bodoni

For those who read my article on font rendering of professional fonts were surely disappointed to read that their fonts would most likely not render well in browsers on Windows if you use the CSS technique @font-face.

At the moment your best chance of getting a font rendering well in a browser is by buying or renting one from a font foundry like FontFont or Ascender, who optimize their fonts for the web. Fonts that aren’t optimized most likely will not render that well.

Well, there is some good news. IE9 uses Direct2D and DirectWrite and it seems that it does a much better job at font rendering as you can already see in the example on the left. So although we will still be very much dependent on those optimized fonts until the predecessors of IE9 have finally faded away, there is light on the horizon.

Its very exiting to see that the font rendering improved so much. Just look at the zoomed in part of the letter ‘g’:

The letter 'g' of the font Bodoni at 500%. Again: IE9 on the left and IE8 on the right, in case you were still wondering

Some notes on rendering

Not very surprising, but sometimes the rendering of a piece of text in IE9 can result in something that’s significant wider than in IE8:

Two screenshots of identical texts in IE8 and IE9, placed on top of each other

You can still find some rendering glitches like you can see here:

Still some bad rendering in IE9 with Helvetica at font-size 14, 15 and 16

Dax too still renders bad at some font sizes. The first line is IE9. The second line shows the font in Safari, rendering it as it should be.

Just to make it absolutely clear: the fonts in these examples are converted without any hinting improvement.

Related posts:

1. Test: Popular professional fonts as webfont
2. New web font service: Ascenderfonts.com

Screenshot of www.ascenderfonts.com

This year the web font will become omnipresent. It’s possible to convert the fonts yourself and incorporate it into your website with something like Fontsquirrel. But some fonts just need a bit more than just a conversion, since they can look bad in browsers, certainly on Windows. So it was time for me to test some font services, since you may expect that the people behind the web service at least check if a font renders correctly.

Lucky for me that Bill Davis of Ascenderfonts.com asked me to check out their new font service after reading my article on web font rendering. At that time Ascenderfont did not offer trial accounts, so I was happy to take the offer in order to be able to give the service a spin for free.

The Ascender Corporation

The website Ascenderfonts.com is not a company by itself. It is the webshop of the font foundry Ascender Corporation. The company creates fonts, extends glyphs and hinting and resells fonts, so the emerge of web fonts means another opportunity for them to sell their fonts.

The company is founded in 2004 by a few software developers and typographers. One of the founder, Steve Matteson, has worked on both Arial and Times New Roman for Windows 3.1. He also designed Convection which is the font for the Xbox360, Liberation which is used on many Linux distributions and Andale Mono, a mono spaced font that for long had been my favorite font for replacing that less readable Courier. Finally he also designed Droid, the font for Google’s Android platform.

Another founder of Ascender, Tom Rickner, has been involved with the design of fonts like Georgia, Tahoma and Verdana. All fonts we’re familiar with.

Ascender Officially started their web font service in July 2009 but it wasn’t a real option for web developers back then, since they only offered EOT Lite. That automatically meant that the fonts were only visible in Internet Explorer.

Back then EOT Lite was proposed by Ascender to the W3C as a default standard for web fonts. But the W3C chose WOFF as a standard, so in the beginning of January they started to support TTF and WOFF as well. Now all major browsers except Safari on the iPhone are supported.

The service

The fact that the service is now cross-browser has not been promoted yet, so it’s still more or less under the radar. But that could change quickly. They already offer 200+ fonts (Typekit offered at time of writing 400+) but want to have between 500 and a 1000 web fonts within two years.

Getting such a large collection is harder than it seems. Many fonts are by default not suitable for the web. I did a little test recently to see how some popular professional fonts would look like in a browser. All of them did not render well in one or more font sizes. It’s not much better with free and shareware fonts: a study of Ascender concluded that almost 96% of all those fonts have some sort of trouble with rendering in the browser.

So there’s a whole world of fonts that need to be improved in order to be used on the web. It’s easy to see the need. Fonts are a major component of a corporate identity and fonts like Arial or Times New Roman are rarely part of the offline corporate identity. Every company wants to have their online identity in sync with the offline version so that means lots of potential work for Ascender. Making a print font fit for the web starting from 9 pixels and up is worth a few days of work.

The focus on good screen rendering is according to Bill Davis of the Ascender Company the main reason why a web developer should choose for their service. According to Bill some other advantages of their service would be that their service (in contrary to Typekit) works without Javascript and that the licensing is per font and per domain, which should be easy for billing, especially for larger companies.

What I missed when using the Ascenderfont service is a bit more information about the rendering. There are screenshots of Windows and the Mac and you can do a actual font rendering in your own browser, but it’s not as detailed as Typekit that show previews of fonts at different font sizes, of all the major browsers on each major operating system. Okay, maybe it’s a bit too much information, but it is comforting to know that you can check every option before choosing a particular font.

What I do like is that the web fonts are categorized between the ones that are fit for headings and the ones that are fit for body text. Typekit has that function too through tagging, but at the moment only a few fonts are tagged as either headline or text.

What about the font creators?

With all the web fonts popping up everywhere I was wondering how the font foundries themselves look at this new development. Well, the people of Ascender certainly don’t feel uncomfortable with it. Bill Davis of Ascender says that most of their clients fine with web fonts: “Almost all of our clients agreed with our proposal of EOT Lite (wb: similar to EOT, but without URL binding and proprietary compression) as a standard, so that’s a clear sign that font creators see web fonts as a viable way of using fonts in websites.”

Which service must I choose?

Although it’s interesting to compare web services with each other, it will be the font service with the most fonts that will probably win the battle for the clients. Designers want to have a broad choice of fonts to choose from. That is: if they even check if a font is available as a web font on forehand. Every web developer is sometimes confronted with designs created by someone who wanted to make something ‘challenging’ or just don’t know/care about technical limitations. In such a case it’s the service with the most fonts that could most likely offer font that’s in the delivered web design.

Related posts:

1. List of web fonts services and resources
2. Web font rendering in IE9

You can read more about it on their weblog.

Related posts:

1. List of web fonts services and resources

These websites host fonts for your website. That way you’ll have the most up-to-date version of the font file and the best @font-face coding.

• Ascender fonts
  Webshop of the Ascender Corporation which makes and (re)sell fonts. At first the service offered only EOT Lite, but since 2010 they also support TTF and WOFF. They now also have a 30-day trial account.
• Fonts.com web fonts
  The web font area of the main fonts.com website of Monotype Imaging.
• Google Font Directory
  A simple, free service of Google that offers a handful of free fonts to add to your website.
• Kernest
  Free web font service. Commercial use permitted.
• Type Front
  Does not sell web fonts, but hosts them. Offers a limited free account and a 30-day trial account for other (paid) accounts. It’s an initiative of the Australian company Small Park.
• Typekit
  Started in September 2009 by Jeffrey Veen. Offers both free and paid accounts. You can choose between free fonts as well as fonts from well-known foundries.
• Typotheque
  Dutch type foundry that offer their web fonts with a free 30-day trial account. You can specify how you want to use the font by choosing for example the target language and font styles. That way the font can be compressed to a very small size. Offers TTF and EOT.

Where to download web fonts

These websites only offer the web font. Ideal if you want to host it yourself and don’t want to be dependent on an external server.

• Fontspring
  Font reseller that offers many fonts as fit for the web. Their webfont package consists of an EOT and a TTF.
• Fontsquirrel
  A large list of free fonts, converted for the web. But watch out. The fact that you can download web fonts does not mean that they are all legible or fit for use.
• Web FontFont
  Just started selling a few of their fonts as web fonts. Their web fonts packages have a EOT Lite and a WOFF version of the file. You do the hosting of the fonts yourself. As an alternative FontFont advises you to take a free TypeKit account in order to host your files.

Related posts:

1. FontFont is now selling web fonts
2. New web font service: Ascenderfonts.com
3. My favorite for converting fonts to EOT

I wanted to know how fonts that are popular with designers would look like on the web. Can you just convert those fonts to a webfont and put it in your website? I had mixed experiences with free fonts. But hey, they’re free. Maybe the those fonts you paid a lot of money for can do the job.

When designers realize that web browsers can load any font, they will try to push the limits with trying new fonts and web developers will certainly be pressured to convert a Gill Sans or Garamond into a webfont. License or no license. Especially since they are able to create fonts that contain just a subset of the original characters. That makes it unfit for people who hope to get a professional font for free by just downloading the font file from a website.

The test procedure

Please don’t pin me on not having the right Helvetica or Garamond. I’m not familiar with the subtleties between different version and foundries. I converted the selected fonts with Fontsquirrel’s fontface generator. The result is viewed in the following browsers:

• Firefox 3.5.7 or 3.6 RC1 on Windows Vista
• IE8 on Windows Vista
• IE6 on Windows XP
• Safari 3.12 on Mac OS X Leopard. Since I don’t own a Mac I used the service of Browsrcamp.com.

Fontsquirrel generates a preview text in different font sizes. I used that list of predefined font sizes as my check list. So I tested these font sizes:

9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

As you see there are enough other font sizes that might work as webfont. This test is not intended to be absolute and complete. I want to see how professional fonts behave as webfonts and what the typical font render problems are in browsers.

Helvetica

Definitely an all-time favorite. Apple computers have a Helvetica installed by default, but Windows does not. The Helvetica that I used for this test renders reasonably. Check out the screenshots for Firefox, IE8, IE6 and Safari. I also have the screenshots of the italic fonts for Firefox, IE8, IE6 and Safari. There are enough rendering glitches, though:

Some chracters are combined in Firefox (Windows Vista) at 11px.

The kerning of the 'e' is off in IE8, Vista at 15px.

Some characters seem to have a cap at font sizes 14, 16 and 18px in IE8 Vista.

Another kerning problem: the top is cut off in IE8 at smaller font sizes.

IE6 on XP SP3 is doing better than IE8 Vista, but vertical lines are over-emphesized at smaller font sizes and the text is very grey.

Looking in all four browsers, we get this list of usable and unusable font sizes.
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Garamond

Screenshots of Garamond in Firefox, IE8, IE6 and Safari.

There were lots of Garamonds to choose from. Don’t pin me down on not having the right Garamond of the right vendor. The errors that I encountered here are of more importance than the difference between different Garamonds.

With Garamond we can clearly see the strange font rendering that can happen in Firefox It’s almost as if it tries to add some creative touch to the font and fails. Take a look at the images below. Some characters are very different from the original font design, not? These rendering oddities also occur with the type Fontin Sans, that’s used on this website. It means that I cannot use some font sizes because some characters look weird.

Firefox PC: the character 'q' in different font sizes appear very different from each other.

Firefox PC at font size 13px: note the odd 'g' and the uneven distribution of space in the 'm'.

IE8 is even worse, Mostly because of bad kerning, I’d only use this font if the size is 48 pixels or larger. Look at the images below to see what IE8 does with text in large font sizes like 36px and 60px.

IE8: Because of bad aliasing and bad kerning the 'e' even looks bad at a font size of 36px!

IE8 again: Although I think it's more or less acceptable, the capital 'T' definitely needs more anti-aliasing at the top.

Garamond file size

My Garamond font file is very large to be a webfont by the way: 343Kb. That really asks for removing some characters. If I omit support for Greek, Coptic and Cyrillic, I can scale the file size back to 112 Kb. If I choose to only support Basic Latin, Latin-1 Sup, Currency Symbols and Punctuation, I end up with a file size of 82 Kb. Then you’ll have just one font style of the font family. If you want to have text in Italic, you have to double the file size.

Garamond font size

If you want to use a Garamond, you’ll have to use a much larger font size. That’s because the height difference between uppercase and lowercase in a Garamond is larger than the standard Arial. You need a 16px Garamond to get lowercase text that is of equal to that of a 12px Arial. In case of Helvetica it’s 13px by the way.

So we get this list of usable and unusable font sizes:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72:

Dax

Screenshots of Dax in Firefox, IE8, IE6 and Safari.

Dax is, to my surprise, doing a pretty job as a webfont. Almost no strange kerning in IE8 and almost no creative font interpretation in Firefox. For some reason are font sizes 21 and 24 bad for all characters, but other font sizes are doing well with the exception of a few characters.

Firefox 3.6 PC: FF and IE8 both have trouble with the diagonal line in the 'e'. At various sizes it looks like a staircase.

Firefox 3.6 PC: Both IE8 and FF have trouble font size 21 and 24. Note that the lines do not always have the same thickness.

So we get this list of usable and unusable font sizes:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Gill Sans

Screenshots of Gill Sans Regular in Firefox, IE8, IE6 and Safari.
Screenshots of Gill Sans Bold in Firefox, IE8, IE6 and Safari.

Gill Sans Regular looks relatively nice. There are enough font sizes to choose from. Let’s focus on some rendering issues:

Another example of the 'creativity' of Firefox. You see some text in font size 16 and 17. Note the 'o' and 'e' on the top line that look like flat ellipsis instead of perfect circles.

IE8 Vista: Font size 14 looks nice. Except the captital 'T', which is too thick.

IE6 on XP SP3 does too much anti-aliasing, so that text in small sizes become almost a grey blur. Using a bold style can really make a difference.

Usable and unusable font sizes for Gill Sans Regular:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Usable and unusable font sizes for Gill Sans Bold:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Bodoni

Screenshots of Bodoni Book in Firefox, IE8, IE6.
Screenshots of Bodoni Book Italic in Firefox, IE8, IE6.

IE8: Even at large sizes the small lines tend to be troublesome. Note the broken lines in the 'o', 'e', 'p' and 's'.

The grey blur of IE6

Bodoni renders badly. As I expected. The thin lines in serif fonts prove to be troublesome in webfonts. This is mostly due to the anti-aliasing of IE8 that is way too sharp. The italic font style has a even worse legibility.

Usable and unusable font sizes for Bodoni Book:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Usable and unusable font sizes for Bodoni Book Italic:
9 10 11 12 13 14 15 16 17 18 21 24 30 36 48 60 72

Conclusion

Phew! that’s a lot of data. So what does it all mean? Well, for starters we now know for sure that you have to check your font in different browsers and eliminate the font sizes that render badly before you start to design. This and other tests seem to show that it’s best to only use simple, sans-serif fonts. That’s because variation in thickness and diagonal lines prove troublesome in webfonts. Especially in IE8 on Vista because it’s very sharp anti-alias. It’s so sharp that the fonts look jagged.

Fonts in Firefox don’t look jagged and look great in very large sizes. The trouble is the ‘creativity’ in the rendering. Characters can be wider, smaller, higher or lower than intended. In some cases it can change the complete look of a font.

The anti-alias in IE6 on Windows XP SP3 is in most cases way to strong. Most black text is printed grey at smaller sizes. But in some cases the vertical lines of characters exactly fit in one pixel, which results in a pure black line in a grey text. Not good.

And Safari? You haven’t seen me talking about Safari. That’s because the font rendering in OSX is all you could wish for. That doesn’t mean I have seen some rendering issues, but they are of a complete other order and are insignificant compared with the troublesome rendering on Windows. Font rendering in the PC version of Safari is by the way just as bad as IE, if not worse.

I recently tried Typekit and seen webfonts on Ascenderfonts. The selected fonts look most of the time way better than you can do yourself. So I guess that webfont services is logical option, from both legally and legibility standpoint.

Related posts:

1. Webfont pitfalls
2. My favorite for converting fonts to EOT
3. Web font rendering in IE9

One of the first pitfalls you can fall into when using webfonts is that you find fonts that seems nice but aren’t usable. That could be for a number of reasons:

• Huge line heights: Some (free) fonts have lots of space above and below the type. You have to give the text something like line-height: 0.8em to make it look good. But users with Chrome or old browsers will not see your website. Instead they will see lines of text in Arial on top of eachother.
• Legibility: Many fonts are only useful as a heading. That’s because font rendering on Windows is far from perfect. Especially at small font sizes. If your font isn’t readable at 11px, think twice if you want it for your body text. Please keep in mind that fonts in IE are even less legible.
• Don’t trust Photoshop: Photoshop cannot emulate the bad aliasing that can occur in browsers, so don’t comfort yourself when everything looks fine in Photoshop.
• Test in browsers: Pick the fonts you want to use and test it in different browsers. I like the free font-face service of Fontsquirrel because it not only converts the fonts to webfont format, but it also generates an HTML-file with the webfont in different sizes. Just open the page in various browsers and compare. You can check which font sizes have a good legibility. Be sure to check IE and Safari on PC because they are the worst when it comes to font rendering.
• Be wary of free fonts: I use free fonts, but you really have to pick the right ones. Some have for example problems with legibility.
• Be wary of commercial fonts as well: Users can download your fonts. So if  you use a $200 dollar font, you make it freely available. In theory you could make a new font with just a subset of the original. That would make it less desirable to download, but also less usable and it’s still not legal at all.

Conversion options

Fontsquirrel has some options when converting fonts to EOT, the only font type that IE supports.

• Hints: Hints help the anti-aliasing engine with it’s work by giving … well, uhm … hints on how to do that. Hints tell what pixel should get which color in order to create the effect of smooth lines. If your font has bad hints or none at all, you could auto generate them when converting. It can make a difference. Hinting is done fully automatic though, so you could expect glitches like having an i without a dot. Those errors occur mostly at small font sizes, so if you use the font in headings it should be fine.
• Subsetting: A font can be as small as 20Kb, but also as large as 200Kb. Multiply that number with every font style you want to use like italic and bold. My weblog loads 4 font files of +- 25Kb. For IE the font files are even larger: 4 times 70 Kb. You can limit the file size by removing all the types you won’t use like Arabic or Chinese.

Setting up the font-face right

• The right @font-face syntax: Writing the font-face code isn’t hard to do. But what you really need to be sure of is that it works good for all browsers. After I implemented webfonts in this blog, I discovered that Firefox loaded both OTF and EOT files, although it doesn’t even support EOT! Paul Irish has a nice article about the various font-face options and concludes that there is only one good syntax. That’s the one below:
  @font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'), url('GraublauWeb.otf') format('opentype');
}
• Cross domain webfonts: I discovered that Firefox is pretty fussy when about the location of fonts. This can save you an hour of frustration.

Of all the errors I made, the biggest one was the idea that you can grab any font, use it in your website and be sure that it renders like you would expect in Photoshop. It just doesn’t. There aren’t much fonts that render well at 11 to 14 pixels.  This blog used the font Fontin Sans for all text. Now I scaled it down to just the logo and the major headings. All other text is “just” Tahoma/Geneva.

Related posts:

1. Test: Popular professional fonts as webfont
2. My favorite for converting fonts to EOT
3. The trouble with @font-face
4. List of web fonts services and resources
5. No sign of @font-face in Chrome 4

Internet Explorer is the only browser that supports EOT, a font format that has digital rights management. That way you can make sure that your $200 font isn’t downloaded and used by everybody on the internet.

But like I said: IE is the only browser that can understand that file type. So Mozilla apparently implemented some sort of protection against font hijackers: It will only accept fonts from domains that specifically allow fonts to be downloaded. In case of Apache you have to add the following code below to the .htaccess file. I found it on Open Font Library.

<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

This does not help you prevent people from stealing your font, but it will protect you from web developers who want to add the URL to the font on your domain in their font-face declaration. It’s not really a solution if you ask me. It seems more like a gesture to the creators of fonts.

It appears you could replace the asteriks with the domain of your website, but in my case (http://electricspace.blogspot.com/) did not do the job.

Related posts:

1. The trouble with @font-face
2. No sign of @font-face in Chrome 4
3. My favorite for converting fonts to EOT
4. Webfont pitfalls
5. New web font service: Ascenderfonts.com

• The menu on the top right was large and clunky. Because of that it didn’t leave much room for more links.
• The ‘logo’ on the top left did not feel like a real logo mainly because it was … well … just not designed well.
• The shadow effect on the columns looked cool, but because it was made with PNG8 images instead of PNG24, it wasn’t possible to add an background image to the page.

What I did like was the scalability of the website. you could as easily view the page on your (i)phone as it would be on your large, wide computer screen. I dropped support for mobile phones. There are lots of Wordpress plugins to cater the mobile devices. I have to dive into that some time. For now anyone with a mobile device can grab the RSS feeds.

I still have to fix a few styling glitches but I thought the design was good enough to make the switch. Here are the most important aspects of the design:

• Use of rgba as background color. This makes it possible to set opacity for just the background instead of the whole box. rgba is not supported in IE, so you will have a solid white background then.
• Using opacity in the columns makes it possible to use large backgrounds. That gives me a reason to pick up my photography.
• The use of webfonts. This was something I was eager to use. This is something designers and web developers alike have been waiting for. The implementation isn’t perfect, but it looks well in Firefox and on the Apple. IE and Webkit on the PC still need some tweaking. I’ll go in to more detail in an upcoming article. For now I’ve been glad to be able to experiment with a real web site instead of running some tests with webfonts.
• Less data: I removed irrelevant data where I could. It’s most apparent in the list of articles on the homepage where I removed information like categories, tags and dates.
• Links become visible with an underline when a column is hovered. This will make the website look less crowded. It’s a bit like the folder tree view in Vista’s Windows Explorer: you will only see the folding icons (the plus and minus icons next to the folders) when that section is active.

There are some things I have to do:

• Make a logo that is suitable for creating a favicon
• Tweaking the fonts for IE & Webkit on PC.

No related posts.

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