how to generate a webfont kit with open source tools

posted by alexis reigel on august 06, 2012

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
# 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.

commented by Catherine on march 30, 2015

Here is another popular Webfont Generator.
I use this often. Between fontsquirrel and everythingfonts generator the later is simplest you can get (one click) the former gives you lots of option if you are a pro.