The CSS3 Font Converter

The CSS3 Font Converter is a command line script that converts TrueType and OpenType fonts to all the other @font-face formats (i.e. EOT, SVG and WOFF). It also can implement auto-hinting, report on if a font supports and font-feature-setting tags (e.g. ligatures, true small-caps, old-style numerals, etc). It can run on any operating system that can run Bash scripts, including Mac OS X, Linux and Windows (using Cygwin).

If you are not familiar or comfortable with using the UNIX command line, this script may not be for you. If you are willing to learn, I highly encourage it, since there have been many times in my web development career that it has proved useful and a huge time-saver. A good place to start is Learn UNIX in 10 minutes by Cliff Johnson.

Installation

I have tried to make this tool as easy to use as possible. If you follow these easy steps, it should work. If you have trouble installing the tool after you have followed all these steps, please leave a comment at the end of this post — I really want to make this as bulletproof as possible.

1. If you are using Windows XP/Vista/7, install Cygwin with the FontForge package. If you have never done this before, I have created a supplementary blog post to walk you through the installation process. If you have installed Cygwin before, you still may want to read the last half of the article, since installing FontForge can be difficult under Cygwin (at least it was for me until I did some digging).
2. Download and Install FontForge (if you are a Windows user, this is covered in step one). There are complete instructions on how to do this under OS X, and Linux as well. Update (May 14, 2011): The Linux page doesn’t mention this, but if you are an Ubuntu user, you can use apt-get to do the installation for you easily:
   

   sudo apt-get install fontforge
   

   Thanks to Richard Curran for pointing this out.

3. Download EOTFast (if you develop using Windows) or ttf2eot (for OS X and Linux, installation instructions are here).
4. Download the sfnt2woff package (this page has packages for Windows and OS X, as well as the source that one can compile for Linux).
5. Download ttfautohint (this page has packages for Windows and OS X, as well as the source that one can compile for Linux).
6. Download the CSS3 Font Converter from GitHub and unpack the contents in your path someplace.
7. Open up a terminal window (under Cygwin, that would be the either the “Cygwin Bash Shell”, or, better yet, “rxvt native” if you have that installed). Then, cd into the directory that you unpacked the CSS3 Font Converter, and edit convertFonts.sh (if you are using Windows, don’t use notepad to edit this file, since shell scripts don’t like to be saved as Windows text. If you are familar with it, use vim instead). You will need to edit the first few lines:
   

   #!/bin/bash
   
   #########################################################################
   ## CONFIGURATION AREA: This stuff is the only stuff you may need to     #
   ##                     change.                                          #
   #########################################################################
   
   # The path should contain the directories where EOTFAST-1.EXE, ttf2eot,
   # fontforge, and all the scripts in the @Font-Face Contruction Set reside.
   # Uncomment the line below with the right directories.  Remember the
   # $PATH at the beginning of the string, or the script will forget what
   # was originally in the PATH.
   # PATH="$PATH:/some/directory:/some/other/directory/"
   
   ....
   

   If you haven’t installed the other packages in directories in your PATH, you must uncomment the PATH line and edit it so that it contains them.

8. If all is well, you should now be ready to convert fonts. To test, create a new directory, download and unpack the Old London Font from Dafont.com into it, and execute the following command:
   

   $ convertFonts.sh *.ttf
   

   If all is successful, you should see output similar to this:

   Converting OldLondon to eot
   (Using EOTFAST)
   Converting font "Old London"
   Successfully written "OldLondon.eot"
   Converting OldLondon to svg
   Converting OldLondon to woff
   Converting OldLondonAlternate to eot
   (Using EOTFAST)
   Converting font "Old London Alternate"
   Successfully written "OldLondonAlternate.eot"
   Converting OldLondonAlternate to svg
   Converting OldLondonAlternate to woff
   Writing Stylesheet ...
   Extracting SVG ID
   Getting Font Name
   Extracting SVG ID
   Getting Font Name
   DONE!
   

   Not only does it convert the TrueType font in all the web formats, it produces a nice style sheet you can
   link to:

   @font-face {
           font-family: 'OldLondon';
           src: url('OldLondon.eot?') format('eot'), 
                url('OldLondon.woff') format('woff'), 
                url('OldLondon.ttf')  format('truetype'),
                url('OldLondon.svg#OldLondon') format('svg');
   }
   
   @font-face {
           font-family: 'OldLondonAlternate';
           src: url('OldLondonAlternate.eot?') format('eot'), 
                url('OldLondonAlternate.woff') format('woff'), 
                url('OldLondonAlternate.ttf')  format('truetype'),
                url('OldLondonAlternate.svg#OldLondonAlternate') format('svg');
   }
   

Options

The CSS3 Font Converter can not only convert Fonts in several different ways, but it can also give information about the fonts it generates

--use-font-weight

This option will merge all font-weights and styles under the same font name. This option will likely crash Apple Mobile Safari running under iOS versions less than 4.0 — to avoid this, the converter will not convert fonts to SVG when this option is used. Also note that only the first four weights and styles will be recognized under IE7 and 8.

--use-font-stretch

This option will merge all condensed and expanded fonts under the same font name as the normal font. It is recommended *not* to use this method currently, since at the time of this writing, font-stretch is only supported by Firefox => 9 and IE => 9.

--autohint

This option will hint/re-hint fonts (using ttfautohint by default, or Adobe Font Development Kit for OpenType if using –autohint=adobe). Note that this option will create a bunch of files prefixed with ‘hinted-‘. Attempting to use this option on files already prefixed with ‘hinted-‘ will result in an error.

--use-font-prefix

This option will put a prefix in front of a font name. For example

convertFonts.sh --use-font-prefix --autohint --use-font-prefix=new- peanuts.ttf

will convert all the OTF fonts in the current working directory and produce a stylesheet that with the following font names:

@font-face {
  font-family: 'new-Peanuts';
  src: url('new-peanuts.eot?') format('eot'),
       url('new-peanuts.woff') format('woff'),
       url('new-peanuts.ttf')  format('truetype'),
       url('new-peanuts.svg#Peanuts') format('svg');
}

Note it also changes the names of the converted font files as well.

--output

This option allows the user to change the file name of the font stylesheet the converter produces from stylesheet.css. For example:

convertFonts.sh --output=peanuts.css peanuts.ttf

names the font’s stylesheet peanuts.css

--show-features

Presents the user with a list of OpenType feature tags a font supports which can be used inside a style sheet using the CSS3 font-feature-settings property (more information about OpenType feature tags can be found in the article Better Web Typography With font-weight, Autohinting and font-feature-settings. The font can be in either be OpenType or TrueType. For example:

convertFonts.sh --show-features peanuts.ttf

will show the OpenType tag features in the following format:

Font: Calendas-Plus.otf
'kern' Horizontal Kerning in Latin lookup 0
'aalt' Access All Alternates in Latin lookup 0
'aalt' Access All Alternates in Latin lookup 1
'smcp' Lowercase to Small Capitals in Latin lookup 2
'onum' Oldstyle Figures in Latin lookup 3
'lnum' Lining Figures in Latin lookup 4
'case' Case-Sensitive Forms in Latin lookup 5
'dlig' Discretionary Ligatures in Latin lookup 6
'sups' Superscript in Latin lookup 7
'liga' Standard Ligatures in Latin lookup 8
'ornm' Ornaments in Latin lookup 9
'swsh' Swash in Latin lookup 10
'sinf' Scientific Inferiors in Latin lookup 11
'numr' Numerators in Latin lookup 12
'ordn' Ordinals in Latin lookup 13
'frac' Diagonal Fractions in Latin lookup 14
'dnom' Denominators in Latin lookup 15
'salt' Stylistic Alternatives in Latin lookup 16

Information on these features can be found at these URLS: 
  - http://www.microsoft.com/typography/otspec/featurelist.htm
  - http://partners.adobe.com/public/developer/opentype/index_tag3.html

Note that this option does not convert the font(s) given.

Download

Download the CSS3 Font Converter from GitHub