Electric Monkey — Converting fonts to webfonts

Write this script to a file:

#!/usr/bin/fontforge
Open($1)
# Generate($1:r + ".otf")
Generate($1:r + ".ttf")
Generate($1:r + ".eot")
Generate($1:r + ".svg")
Generate($1:r + ".woff")
Generate($1:r + ".woff2")

Run the script:


$ ./convertfont.sh SomeFont-Regular.otf

Import the fonts into CSS:

@font-face {
  font-family: 'some-font';
  src: url('SomeFont-Regular.eot');
  src: url('SomeFont-Regular.eot?#iefix') format('embedded-opentype'),
       url('SomeFont-Regular.svg#SomeFont-Regular') format('svg'),
       url('SomeFont-Regular.ttf') format('truetype'),
       url('SomeFont-Regular.woff') format('woff'),
       url('SomeFont-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: 'some-font';
  src: url('SomeFont-BoldItalic.eot');
  src: url('SomeFont-BoldItalic.eot?#iefix') format('embedded-opentype'),
       url('SomeFont-BoldItalic.svg#SomeFont-BoldItalic') format('svg'),
       url('SomeFont-BoldItalic.ttf') format('truetype'),
       url('SomeFont-BoldItalic.woff') format('woff'),
       url('SomeFont-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

Finally use it:

p {
    font-family: 'some-font';
}