« »

Converting @font-face Fonts Quickly In Any OS

February 20th, 2011 by zoltan · 21 Comments

Notes:

Converting fonts quickly will help speed up production of your projects and can easily integrate into your workflow.

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.

Download the CSS3 Font Converter from GitHub

Examples

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!!!!!
Screenshot of my Argor Biw Scaqh/Old London example

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.

 Screenshot of Peanuts font example.

Why use a font everybody seems to hate when there are other cartoony fonts to choose from?

 Screenshot of Aaaaight!!!!! example page.

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.

Usage

You can convert as many .ttf or .otf fonts in a directory by using the following command:

convertFonts.sh <filelist>

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 .eot, .woff, and .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.

Installation

Full instructions on how to install this tool and usage documentation is now available on the project’s home page on this site.

Notes

  1. 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.
  2. The script will use EOTFast when possible to create the .eot fonts, 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.
  3. 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.
  4. 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.
  5. 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.

  6. 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).
  7. 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.

Image Credit

The image at the top of this post was remixed using works from Abigail Elder, 24oranges.nl, Robbie Sproule and Lisa Brank.

Download the CSS3 Font Converter from GitHub

Tags: @font-face · converting · CSS · CSS3 · Cygwin · FontForge · Fonts

21 responses so far ↓

  • 1 Mathias Bynens // Feb 28, 2011 at 10:17 am

    Nice work, Zoltan! Would you consider putting the script on GitHub?

  • 2 zoltan // Feb 28, 2011 at 10:25 am

    @Mathias: thanks! And yes, I have been meaning to be putting all my work in github and I have been too lazy to do so for some silly reason, despite the pushing to do so by various people. If I don’t do it this week, I will change my default font on the blog to Comic Sans (and if that isn’t motivation, I don’t know what is).

  • 3 Richard // May 13, 2011 at 10:11 am

    Hi there, your article is not old so I find it odd that you didn’t specify this for linux users. For reference, I’m on Ubuntu 11.04.

    sudo apt-get install fontforge

    I hate compiling from source and with apt-get why bother?

  • 4 zoltan // May 14, 2011 at 10:45 am

    @Richard: So true. I am actually an huge Ubuntu fan, and I totally did not think of that. Thanks for the catch. Updating the article.

  • 5 יד שניה // Sep 15, 2011 at 9:06 pm

    Thanks nice post !!

  • 6 Samuel Gavassi Pismel // Sep 21, 2011 at 3:53 pm

    Hey, thanks a lot!

    nice script!

    i dont know if it is a bug or something but when i ran the script, the stylesheet was created in the same folder of the script itself and not in the font folder.

    Thanks again for this script!

  • 7 Arun // Nov 10, 2011 at 8:01 am

    Thanks for the handy script. Can you clearly state under which license(GPL/LGPL/BSD/MIT/…) I can download the script? Please state that under LICENSE.txt file in github. That would be helpful for me, as my organization does a license verification before using a tools/source.

    Waiting for your reply.

    Arun

  • 8 zoltan // Nov 11, 2011 at 4:16 pm

    @Arun: I have changed the readme.txt file to include the license information, but just so everyone here knows, the script is released under the LGPL. License can be found at http://www.gnu.org/licenses/lgpl.html

  • 9 Rubin Vrooman // Apr 16, 2012 at 9:40 pm

    This precise publish could be quite helpful if you ask me. I’ve only started the self-hosted website this also article helped drastically. thank you!

  • 10 Richard // Oct 11, 2012 at 8:38 pm

    Hi, I am really interested in using this tool but I am getting a bash: convertFonts.sh: command not found error in Terminal. I am running a PowerPC G5 OS 10.5.8. I downloaded css3FontConverter, fontforge, ttf2eot-0.0.2-2, sfnt2woff and Batik 1.7 (I assumed that Java was already installed because I am running a MAC). In terminal I NANO convertFonts.sh and changed the paths for Batik. I put all the necessary folders for the scripts in one master folder that I called WebFonts in my Home directory.

    After all was said and done I had this in my converFonts config area: PATH=”/Users/{username}/webfonts/css3FontConverter:/Users/{username}/webfonts/ttf2eot-0.0.2-2:/Users/{username}/webfonts/woff-code-latest:/Users/{username}/webfonts/fontforge”

    I tried running the convertFonts.sh *.ttf and got bash: convertFonts.sh: command not found.

    Could somebody please help, perhaps I haven’t done this right?

  • 11 zoltan // Oct 15, 2012 at 8:20 pm

    @Richard: It seems like you don’t have your PATH variable on your Mac set up to run programs in the directory you installed convertFonts.sh in. To test this theory, you should try running the script with the full path of the directory you installed it to. For example, suppose you installed the shell script in the /Users/zoltan/bin/ directory. Try running the program by typing in the command /Users/zoltan/bin/convertFonts.sh at the command prompt. If this works, you need to add /Users/zoltan/bin/ to your PATH variable. Tech Recipes has a great article, OS X: Change your PATH environment variable, that can help you out here. Please let me know if this was or wasn’t the problem — I want to make sure that the information on this page remains current and relevant.

  • 12 Imran // Oct 16, 2012 at 11:18 am

    Can you please build a gui version. Thank you

  • 13 Imran // Oct 16, 2012 at 11:23 am

    I am getting error while running bash command
    C:/serve/main/convertFonts.sh test.ttf

    File test.ttf is not a TrueType or Opentype font. Skipping Writing Stylesheet… DONE!

  • 14 zoltan // Oct 28, 2012 at 10:45 pm

    @Imram: If you could please send me a copy of test.ttf, and what platform you are running it on (Windows, Linux or Mac OS X), I would love to help you debug this issue. Thanks in advance. As for a GUI version, if anyone would be willing to help with this I would love to collaborate. In the meantime, you may want to try Font Squirrel’s excellent web-based font converter.

  • 15 Richard // Nov 8, 2012 at 6:47 pm

    Hi Zoltan,

    Thank you for the prompt response. I’m sorry it took me so long to get back to this. We got pretty busy for a while at the office and this was the first moment I had to get back to work on this.

    I took your advice from your post on Oct 15, 2012 at 8:20 pm. This time I did not get the “bash: convertFonts.sh: command not found.”

    However, I did get this: ###################################################################: bad interpreter: No such file or directory

    Any ideas about this error?

    Thank you for your help on this.

    Richard

  • 16 zoltan // Nov 10, 2012 at 3:14 pm

    @Richard:

    It looks like you may be missing the first line of the convertFonts.sh file. Open it up in a text editor and ensure that the first line of the script has this:

    #!/bin/bash

    If it doesn’t have this as the first line, put it in and see if that fixes the problem.

  • 17 Eric // Nov 14, 2012 at 1:00 pm

    Interesting script.

    A few points:

    All the font files get generated within the proper source location, but the stylesheet is written where the user is located within the terminal session under OSX.

    Also, It doesn’t seem to like it if you have a bunch of nested folders with spaces in them. instead of escaping them, it tries to remove all spaces in the full path, not just the filename, then it can’t write the files as the path is completely different and the directories don’t exist.

    Once you figure that out, it works well ;-)

    PS: ttf2eot does not work on PPC Macs.

  • 18 Matt // Dec 11, 2012 at 7:07 pm

    Great script!

    You should add ttfautohint to this. It’s really useful for adding the missing hinting required to render some fonts properly on windows systems. I’ve had lots of issues with @font-face and rendering the fonts properly in Chrome on windows.

    Pretty easy to add in. Just have to install the ttfautohint (http://www.freetype.org/ttfautohint/) script and add this around line 200 to the convertFonts.sh:

    if [ -f $FILE_STUB.ttf ]
then
	echo "auto hinting the ttf file"
	ttfautohint -v -f -i $FILE_STUB.ttf $FILE_STUB-hint.ttf
	if [ -f $FILE_STUB-hint.ttf ] ; then rm -f $FILE_STUB.ttf && mv $FILE_STUB-hint.ttf $FILE_STUB.ttf ; fi
fi

  • 19 zoltan // Dec 12, 2012 at 3:53 pm

    @Matt: I don’t know how I didn’t know about this project until now … ttfautohint is awesome! :-)

    I will be adding support for this in the font converter very soon. I will also add a flag in the script to turn auto-hinting off for those who are happy with the way the font is hinted already (or if the license for the font doesn’t allow any modification to the hinting data).

    Thank you for your comment. It will make an excellent addition to the script.

  • 20 André Vendramini // Feb 12, 2013 at 6:12 pm

    EXCELENT WORK!!! =)

    Sometimes didn’t work on IE7/8. Do you know why? Is there some errors when converting to eot? Also, I tried online converters and they didn’t work either (just IE7/8).

    Thanks!

  • 21 zoltan // Feb 12, 2013 at 6:45 pm

    @André: Can you show me an example of a font that doesn’t work in IE7/8? If you can send me that information, along with what OS you were running the script on, I’ll look into why this happens.

Give Feedback

Don't be shy! Give feedback and join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.

An orange star denotes a required field.