- Oct 1, 2014: Support for WOFF2 fonts have been added!
- Sept 23, 2013: Added support for autohinting, CSS3
font-feature-settings. More information is available on my subsequent post, Better Web Typography With
font-weight, Autohinting and
- The official documentation and installation instructions for the CSS3 Font Converter using Mac OSX, Windows or Linux are are now available at the project page on this site.
I love experimenting with web fonts, but using the hodgepodge of free and open source desktop tools to convert them manually is time consuming. To speed things up a bit, Font Squirrel created the excellent @Font-Face Generator web application which not only generates the fonts for you, but also creates a stylesheet a developer can import and use the font immediately. I really like this tool and it inspired me to write a command line tool that would create a package like Font Squirrel’s generator, The result is a shell script that uses FontForge, Batik and Readable Web’s EOTFast to do the heavy lifting. It was originally developed under Windows using Cygwin, but I spent a bit of extra time to ensure that it can run under Linux and Mac OS X (using ttf2eot instead of the Windows-only EOTFast to generate the
.eot fonts). Since it runs on OS X, it should run under BSD flavours of Unix as well, but I haven’t confirmed this (I would be grateful to hear from any BSD users on how it works).
This tool is not intended to replace Font Squirrel’s tool (as a matter of fact, their tool has a few more options than mine). However, I find it useful when trying out a variety of fonts on my local web server, so I thought I’d share.
If you’re not familiar with the command line on your particular operating system, this may not be the solution for you. I will, however, give step-by-step instructions on how to install and run the shell script. If you stumble into any problems, and especially if you find any inaccuracies with the instructions here, please post a comment below and I will try my best to address them. I find this script quite useful and would love to help the rest of The Community™ as much I can if they would like to use it as well.
Before we start using the tool, I have included a few examples. They are intended to show situations where a developer may not want to use fonts that are not included on your computer’s font-stack.
|Argor Biw Scaqh/Old London||Peanuts||Aaaaight!!!!!|
Serif or Sans-serif? How about neither? This example makes heavy use of Black Letter fonts, which are not included in most operating systems today.
Why use a font everybody seems to hate when there are other cartoony fonts to choose from?
Grafitti style fonts have a unique look all their own.
In all cases, the original fonts were in True Type format. The font-converter then converted the fonts into all the other @font-face formats, and created a style sheet containing the appropriate @font-face rules that can be easily imported by the author.
You can convert as many
.otf fonts in a directory by using the following command:
For example, if you wanted to convert all the
.ttf files in the directory you are in, you could type in the command:
$ convertFonts.sh *.ttf
The fonts will then be converted to the
.svg formats. It will also generate a stylesheet,
stylesheet.css, that will produce the
@font-face rules using The New Bulletproof @Font-Face Syntax.
If you are converting
.otf fonts, a
.ttf font will be generated first before the other fonts.
Full instructions on how to install this tool and usage documentation is now available on the project’s home page on this site.
- FontForge the program that this script uses to do most of the heavy lifting, can do way more than convert fonts. It is primarily a font editor, and I have used it to add accents characters to fonts that don’t have them (a necessity if you are a Canadian web developer that occasionally has to work with French text). Play around with it – it may become as important to you as your graphics editor and your IDE.
- The script will use EOTFast when possible to create the
.eotfonts, and failing that, will use ttf2eot as a fallback. EOTFast is the preferred solution because it can compress the converted file, but since it only runs under Windows, ttf2eot is needed for the other operating systems.
Note that I have experienced a problem running EOTFast under my copy of Windows 7. I am not sure if this happens on all Windows 7 installations and I would love to hear comments in this area. I have sent a bug report to the developer, but in the meantime, you can use the Windows version of ttf2eot instead.This problem has now been resolved. Thanks to Richard Fink for addressing this issue. I used Batik instead of Fontforge to generate the SVG fonts because I couldn’t get the Fontforge SVG fonts to work. I don’t know why (to be honest, I didn’t look into it that much).The CSS3 Font Converter no longer requires Batik, as FontForge can convert to SVG format correctly.
- I did not build a GUI for this tool. If anyone wants to, please feel free. I would love to hear about it if you do.
- The first time you run the script under Cygwin, you may get this warning:
cygwin warning: MS-DOS style path detected: c:\Program Files\Batik\batik-1.7/batik-ttf2svg.jar Preferred POSIX equivalent is: /cygdrive/c/Program Files/Batik/batik-1.7/batik-ttf2svg.jar CYGWIN environment variable option "nodosfilewarning" turns off this warning. Consult the user's guide for more details about POSIX paths: http://cygwin.com/cygwin-ug-net/using.html#using-pathnames
This error won’t affect how the script runs – it is just complaining about the way Java is running Batik. Since Java needs an MS-DOS path, ignore the warning.
- Before using the tool, make sure you back up files that you don’t want over-written. I am not responsible for any loss of files because you used the tool incorrectly (or because of a bug in the tool itself).
- Before you convert any fonts with this tool, please ensure that you have the legal right to do so by reading the license that comes with the font.