how to generate a webfont kit with open source tools

There are some web based services that convert fonts to a webfont package, the most popular of which is the fontsquirrel font-face generator. For our metaflop project I was looking for a service api that i could call from within our application. Since i didn’t find one I was attempting to build the whole webfont generation by collecting tools that could do the job.

Font types

To create a webfont kit that works on all browsers we need to generate several different font types:

• eot: IE
• woff: Modern Browsers
• ttf: Safari, Android, iOS
• svg: Chrome < 4, Legacy iOS

Tool chain

The following tools are required to generate all the needed font types. I assume that you have your font as otf. If you have a ttf, just switch ttf with otf in the following statements:

• FontForge
  FontForge is primarily a visual outline font editor, but the tool can also be scripted and used on the command line.
  Purpose: generates ttf, svg

The very simple FontForge script (ttf-svg.pe) looks like this:

Open($1)
Generate($1:r + ".ttf")
Generate($1:r + ".svg")

# outputs font.ttf, font.svg
$ fontforge -script ttf-svg.pe font.otf

• sfnt2woff
  Purpose: converts an otf to woff

# outputs font.woff
$ sfnt2woff font.otf

• ttf2eot
  Purpose: converts a ttf to eog

$ ttf2eot font.ttf > font.eot

CSS

The css declaration is based on Fontspring’s bulletproof @font-face syntax and is the same syntax as used by fontsquirrel.

@font-face {
    font-family: 'YourFont';
    src: url('YourFont.eot'); /* IE 9 Compatibility Mode */
    src: url('YourFont.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
         url('YourFont.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
         url('YourFont.ttf') format('truetype'), /* Safari, Android, iOS */
         url('YourFont.svg#YourFont') format('svg'); /* Chrome < 4, Legacy iOS */
}

That’s it. Remember though that you should only convert fonts are legally eligible for web embedding.