free software, web technologies and heavy metal coding (and ruby of course)

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:

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:

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

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

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

# outputs font.woff
$ sfnt2woff font.otf

$ ttf2eot font.ttf > font.eot


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.