Update: This article is obsolete. After some more research I’ve found an even better way to create perfect web-fonts in 3 steps and created a web-font generator tool called Fontie, which does all the work for you…

I’m using web-fonts for quite a while now, and I really love them – somehow. On the one hand web-fonts finally give us designers the ability to create really individual websites, but on the other hand this freedom doesn’t come for free. The cost is the quite complex handling of web-fonts. Starting with the different formats (woff, etf, ttf, svg) different browsers expect for the font-data, continuing with the CSS needed to include fonts into your styles and not really ending with the mess you could get into when trying to find a legal font you could use on a website.

I was lucky enough to find FontSquirrel a few years ago, which offers tons of free high-quality fonts and a @font-face generator, which converts a TTF- or OTF-file into the several web-font formats and generates the CSS to include the font into your page. Quite handy – and until a few days ago I thought this is all you need to know about web-fonts…

The whole story (scroll down for the how-to)

The big thing, I was missing so far, was font hinting (additional information to improve font rendering). FontSquirrel’s generator has some options for hinting, but I never saw a big difference when playing with them. Now I know that this was only because I live in a OSX and Linux world and never cared a lot about details such as font-rendering when I tested my websites on Windows. Otherwise I would have seen that the rendering of some web-fonts (especially my beloved Calluna I use here on Pixels|Bytes) is quite buggy there.

A closer look at font rendering told me that OSX ignores hinting completely and Linux seems to go a similar way, so it’s no big surprise, that the hinting options never changed much for me. Windows on the other hand, has three different rendering engines and all of them need good hinting information to render nice-looking fonts. If these information are bad or missing the font will look something between strange and ugly.

So the trick seems to be to give Windows the right hinting it needs to render fonts correctly. The gold way of hinting is to do it by hand for each letter, but this is quite time consuming and needs a lot of knowledge and experience in typography, so usually only expensive premium fonts have this. Luckily there are also ways to generate hinting information automatically and a lot of free fonts include such hinting, but the results vary – especially when the hinting is used for screen rendering.

FontSquirrel’s @font-face generator has the option to add some automatic hinting to the created web-fonts, but this sometimes causes the font to look a bit different that the original, so I can’t recommend it. Keeping the original hinting values doesn’t seem to work in most cases, so we need to find a way to generate some sceen-optimized hinting info and add it to the font before we convert it for the web.

Fortunately Werner Lemberg started the project ttfautohint (available for Windows, OSX and Linux), which aims to auto-generate high-quality hinting information for web-fonts, and as far as I can tell it does a very good job. The tool offers some options to refine the results, but apart from one little tweak the default values worked well for the fonts I auto-hinted so far. So we finally have everything together to create some web-fonts, which look good on all browsers and plattforms.

How to create a web-font with maximum compatibility

The ingredients:

• 1 free TrueType- or OpenType-Font
• Werner Lemberg’s ttfautohint
• FontSquirrels’s @font-face generator

Step 1: Convert OpenType to TrueType (optional)

ttfautohint can only handle ttf-files, so you have to convert any other fonts into the TrueType format. There are several font-converters out there, but the ones I tried all created TrueType-files, which failed in the second step. Luckily the conversion mechanism of the @font-face generator creates usable files, so we stick with this one here:

1. Go to http://www.fontsquirrel.com/fontface/generator
2. Click on Add Fonts and upload otf2ttf_config.txt
   This set the the required generator options automatically
3. Click on Add Fonts and upload your font-file
4. Confirm that the fonts you’re uploading are legally eligible for web embedding
5. Click on Download your Kit

The downloaded fontkit contains several files, but we only need the TrueType-font, so extract the tff-file from the archive and delete the zip-file afterwards.

Step 2: Add the hinting

For this step you’ll need the the font to be in the TrueType format, so you should either have a font, which is already in that format or you should have converted it to TTF in Step 1. Now open a terminal and type the following commands:

1. Install ttfautohint on your system
2. cd /path/to/your/font/file
3. ttfautohint --strong-stem-width=g fontname.ttf fontname-grayscale.ttf
4. ttfautohint --strong-stem-width=D fontname.ttf fontname-directwrite.ttf

That’s all. Not too complicated even if it involves some commandline stuff, so off to the next step.

Step 3: Create the web-fonts

With all preparations done we can now generate the actual web-fonts. We need to create two packages: One for the grayscale-fonts and one for the directwrite-fonts, so we need to run this step two times with slightly different options. First execute all steps and choose A if possible and then repeat everything but choose B:

1. Go to http://www.fontsquirrel.com/fontface/generator
2. A: Click on Add Fonts and upload grayscale_config.txt
   B: Click on Add Fonts and upload directwrite_config.txt
3. A: Click on Add Fonts and upload fontname-grayscale.ttf from step 2
   B: Click on Add Fonts and upload fontname-directwrite.ttf from step 2
4. Confirm that the fonts you’re uploading are legally eligible for web embedding
5. Click on Download your Kit

You should have two fontkit-archives afterwards, which be combined into one package in the final step.

Step 4: Create the all-in-one package

Almost all browsers are happy with the directwrite-fonts, but IE9 & 10 (yap, IE once again ^^) don’t seem to like this kind of hinting. That’s why we created the grayscale-fonts, which are rendered correctly by all Internet Explorer versions. Luckily IE is the only browser, which unterstands Microsoft’s EPT-Format, so we can use this feature to create a combined package, which offers grayscale-fonts for the IE and directwrite-fonts for all other browsers:

1. Extract the directwrite-fontkit
2. Extract fontname-grayscale-webfont.eot from the grayscale-fontkit
3. Copy fontname-grayscale-webfont.eot into the directwrite-fontkit folder
4. Edit the stylesheet.css in the directwrite-fontkit folder as follows:

   @font-face {
       font-family: 'fontname';
       src: url('fontname-grayscale-webfont.eot');
       src: url('fontname-grayscale-webfont.eot?#iefix') format('embedded-opentype'),
            url('fontname-directwrite-webfont.woff') format('woff'),
            url('fontname-directwrite-webfont.ttf') format('truetype'),
            url('fontname-directwrite-webfont.svg#fontname') format('svg');
       font-weight: normal;
       font-style: normal;
   }

You should open the fontname-demo.html after you’ve saved your changes to check if everything went right. I recommend to do the check with more than one browser (especially IE) and to compare the font rendering closely. If everything looks right you’re done – well, almost…

Step 5: How to enforce font smoothing (update 16-03-2013)

The fontface-kit above works well on all system that have font smoothing enabled, which is true for all Macs and Linux and most Windows versions, but not for Windows XP. Even though XP has the capabilities to render fonts with Microsoft’s own font-smoother called ClearType, it is not enabled by default – for whatever reason. Anyway, this is no problem for IE and Firefox users as these browsers always use ClearType, but Chrome, Safari and Opera obey to the system settings, which can result in some pretty messed up fonts.

Luckily all of the latter browsers can handle SVG fonts, which is quite fortunate since SVG seems not to be rendered by the system, but by the browser itself. In that special case the browsers ignore the system settings and always use font-smoothing, what gives us a way to enforce font-smoothing even if it’s disabled in the system settings.

Various articles (like here & here) suggest that all we have to do is to put SVG in front of the other formats in the font-face CSS et viola – smooth fonts for everyone. But wait, there’s a problem: Since SVG fonts doesn’t include any hinting information the rendered fonts don’t look as crisp as their hinted counterparts on a system that has font-smoothing enabled.

Conveniently, some guy at User Agent Man pointed out a pretty neat way how to detect font-smoothing using JavaScript I used his code as a base for a little script called Font Smoothie, which switches to SVG fonts only if font-smoothing is actually disabled. You can find the code in my Font Smoothie GIST over at GitHub.

The usage is pretty easy. Just make sure you have your web fonts available as SVGs download the Font Smoothie script and include it anywhere in your page:

<script src="https://gist.github.com/letorbi/5177771/raw/fontsmoothie.min.js" type="text/javascript"></script>
<style type="text/css">
@font-face {
    font-family: 'fontname';
    src: url('fontname-grayscale-webfont.eot');
    src: url('fontname-grayscale-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontname-directwrite-webfont.woff') format('woff'),
         url('fontname-directwrite-webfont.ttf') format('truetype'),
         url('fontname-directwrite-webfont.svg#fontname') format('svg');
    font-weight: normal;
    font-style: normal;
}
</style>

As you can see we’re using the code from step 4 here, since no special CSS or anything else is needed. The little Font Smoothie script (~600 bytes) will take care of everything to enable SVG when necessary. Take a look at the Font Smoothie enhanced Calluna demo page, if you’re still in doubt and want to see Font Smoothie in action (an tell me if it’s not working ^^).

Is this all?

Well, yes – in general. I converted a bunch of fonts using the instructions above and they worked so far, but you might have to tweak some @font-face generator or ttfautohint options for some fonts anyway. Web-fonts are still a tricky thing and I’m really interested to read about your experiences here in the comments.

Finally the link to download the Font Smoothie GIST and all needed _config.txt files in one ZIP-archive. The config files are quite readable, so you can also set the options by hand if you like. I only set them by file in the how-to to keep the instructions as short as possible. Take a look at the Font Smoothie GIST, if you want to know how the script works exactly. I commented all relevant parts, so I guess it shouldn’t be too difficult to read.