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 dsrfdsf on august 09, 2017

dfdsfsd

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.