How to create perfect web-fonts in 3 steps

Web-fonts are a hassle. Once you think that you’ve finally nailed it, whoops there comes another special case where all fonts are totally [insert swearword of your choice here]. Same happened to me after my last post on how to create nice web-fonts for every browser. The font I created following this howto worked in all of my test-cases, but soon after I had published the post several comments popped up that told me different. Some of these were only small glitches I could either ignore or fix easily, but in the end I had to admit that my proposed solution is at least incomplete. So I again went on a quest to find the best way to create perfect webfonts.

This took me on a long an dangerous journey, but you might want to take the shortcut and use Fontie, the magic web-font generator, instead. However, since you’re still reading I assume you want to know everything! So here my young fellows is my story on how to create webfonts that look good on any operations system and browser.

Prepare yourself

As with every big journey a good preparation is the insurance to come back happy and healthy. So let’s start: To create nice webfonts you need four tools:

  • Font Forge: The open-source swiss army knife for font creation.
  • ttfautohint: A neat little tool that makes your fonts look better.
  • eotfast: A command-line TrueType to Embedded OpenType converter.
  • scour: A python script to clean up Scalable Vector Graphics.

Font Forge, ttfautohint and Python are available for Windows, OSX and Linux. eotfast is available for Windows only, but you can use ttf2eot or wine on OSX and Linux instead, so this howto should work for everyone. For the rest of the howto I assume that you’ve installed the programs as well as some kind of command line.

Step 1: Create an optimized TrueType font

This one is pretty easy if you ignore the “optimized” in the headline. All you have to do is to open your font in Font Forge, press CTRL+SHIFT+G, select TrueType as format and save everything. Done. If you start with a Truetype font already, you can even ignore this step completely.

But this howto is about creating perfect webfonts, right? ;) So we should not ignore the “optimized” here, but dip our toe a bit deeper into the waters of Font Forge:

Subsetting

Subsetting basically means that you only include the glyphs in the web-font that you actually use on your website. This can reduce the file-size of the final web-fonts dramatically so it’s a good idea to subset your font in general.

To subset a font you first have to open it in Font Forge and select all glyph you want to have in your web-font. You can achieve this by holding SHIFT and clicking on the glyphs (in the default colorset selected glyph have a yellow background). When you’ve selected all glyphs you press CTRL+ESC to invert the selection and remove the now selected unwanted glyphs by clicking “Encoding>Detach & Remove Glyphs” in the menu. After this is done you can generate a TrueType file from the opened font by pressing CTRL+SHIFT+G.

To make subsetting a bit simpler some guys at Google wrote a Python-script calles subset.py that automates subsetting based on Unicode ranges. Using the script is a bit tricky, but it’s actually pretty neat after you’ve mastered it. It is also the core of the Fontie web-font generator, so you might just use Fontie if you’re not interesed in some command-line magic ;)

Font name fixes

If you also want to generate EOT font-files (you most probably want this ^^), you should also take care of the internal font-names. The EOT-standard requires the font-name to start with the family-name of the font (e.g. if the family-name is “MyFont”, the font-name “MyFont-regular” is ok, but “MyRegular” is not). You can edit the names in the “PS Names” section of Font Forge’s font-info dialog (press CTRL+SHIFT+F).

Step 2: Add additional hinting information

First of all: Take a deep breath. The first step might have been tricky, but this one is easy. What we’re doing here is to add some hinting information to the newly generated font. We have to do this, because hinting is THE key to have good looking fonts on windows.

Without the hinting information the windows font-renderer won’t know what are the “important parts” of a font-face and therefore would have problems to render a clear (and readable) font on small sizes. The Mac and Linux font render engines are smarter and can calculate the hinting information automatically, so they don’t care about missing or bad hints.

Fortunately Werner Lemberg started the project ttfautohint, 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 for me the default values worked well so far. Here is what we have to do to add some hinting information to our TrueType font from step 1:

  1. Open a console
  2. cd /path/to/font/from/step1
  3. ttfautohint step1font.ttf step2font.ttf

Don’t be irritated if ttfautohint takes less than a second to complete. Auto-hinting is meant to be done on the fly when displaying a font, so it is really fast.

That’s it for step 2. However, ttfautohint offers three different ways to hint the font and has some other features as well, so it might be good idea to play a bit around with the ttfautohint options, if you’re still not satisfied with font-rendering. Smashing Magazine took a closer look at font rendering, which might be of some help, but let’s continue with step 3 now…

Step 3: Generate the required webfonts

With all preparations done, the final step is to generate the font in all formats, which are needed to support all browsers. By name these are WOFF for Webkit- and Mozilla-based browsers, EOT for the Internet Explorer as well as TTF and SVG as fallback formats.

You have the TTF-font already and WOFF and SVG can be generated easly with Font Forge (press CTRL+SHIFT+G, select the format and save). The SVG font however needs a bit cleanup afterwards (here we need python-scour):

  1. Open a console
  2. cd /path/to/font/from/step3
  3. python scour.py --indent=none --remove-metadata --quiet -i step3font.svg -o step3font_cleaned.svg

The last format missing is EOT. Font Forge cannot generate EOT files, so I recommend to use eotfast, because it is able to create compressed EOT files. These are a lot smaller than the files generated by ttf2eot. The commands to generate an EOT file from a TrueType font are:

  1. Open a console
  2. cd /path/to/font/from/step2
  3. eotfast setp2font.ttf step3font.eot

Some finishing

Congratulation my young friend, you have mastered all challenges of this gruesome quest! You should now have a well-hinted and subsetted web-font in the formats TTF, WOFF, SVG and EOT. There are just two last things, which might be of some interest for you.

Cascading Style Sheets

The first thing is the CSS. The code in general is pretty straight forward, but you should take care of the order in which you mention the different formats to ensure that each browser gets the files it can handle best. I use a derivative of FontSquirrel’s CSS that looks like this:

@font-face {
   font-family:'MyFont-regular';
   src: url('step3font.eot');
   src: url('step3font.eot?#iefix') format('embedded-opentype'),
     url('step3font.woff') format('woff'),
     url('step3font.ttf') format('truetype'),
     url('step3font_cleaned.svg#MyFont-regular') format('svg');
   font-weight: normal;
   font-style: normal;
   font-stretch: normal;
}

Smooth fonts on Windows XP

The second thing is Windows XP. Even though XP has the capabilities to render smooth fonts with Microsoft’s own ClearType technology, it is not enabled by default – for whatever reason. This is no problem for IE and Firefox, but Chrome, Safari and Opera obey to the system settings, which can result in some pretty messed up fonts.

Luckily this doesn’t count for SVG fonts, which always look smooth. Unfortunately they aren’t as crisp as their hinted counterparts if they are rendered on system that have font-smoothing enabled. Therefore I developed a small JavaScript 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 download the Font Smoothie script and include it anywhere in your page:

<script src="fontsmoothie.min.js" type="text/javascript"></script>

The shortcut

For those of you who don’t have the time to go on the big quest of creating perfect webfonts, I’ve created a magic webfont-generator called Fontie. This does all the work of the steps above (and some additionally magic) 100% automatically and within seconds. Just upload a TTF or OTF file and Fontie will generate you a nice little webfont-package with everything you need.

I use it regularly for my own work and it works without any problems, but please feel free to post comments and bug reports here :)