Note:

This post is a companion to my article on Converting @font-face Fonts Quickly In Any OS.

FontForge is a great font editor, but it can be a pain to install for Windows users. Hopefully this article will help you.

Step 1: Install Cygwin

First thing you must do in order to run FontForge under Windows is to install Cygwin. Cygwin is a way to allow programs that run under the Linux Operating System to compile under Windows. Do not worry … we are not going to compile any source code. FontForge has already been compiled under Cygwin and has been packaged up so that end users don’t have to. But in order to use it, you must install Cygwin first:

Cygwin has a nice setup program that downloads and installs the necessary Cygwin packages for you.

1. Open the Cygwin, http://cygwin.com/ page in your web browser

2. Click on the "setup.exe" link. This link downloads setup.exe from the primary Cygwin server; save setup.exe to the directory that you would like to store the downloaded packages in (e.g. c:\download); do not save setup.exe to c:\cygwin, as that is the default directory for the extraction and installation of the downloaded packages.

3. Run setup.exe, you will see the welcome screen:

   

4. Click Next to proceed to the next screen.

5. Choose, Install from Internet, this will still save the package files to your download directory so that you can install Cygwin on any number of machines:

   

6. Click Next to proceed to the next screen.

7. The default Install Root is c:\cygwin which should be fine for most installations. Leave Default Text File Type as UNIX. Leave Install For set to All unless you lack local administrative privileges.

   

8. Click Next to proceed to the next screen.

9. Local Package Directory should default to the directory that you ran setup.exe from:

   

10. Click Next to proceed to the next screen.

11. Choose your proxy setup, or, just choose Direct Connection if no proxy is needed:

    

12. Click Next to proceed to the next screen.

13. Select your nearest mirror for downloading:

    

14. Click Next to proceed to the next screen; setup will download a list of available packages as it moves to the next screen.

15. On the next screen you will select the packages that will be downloaded and installed. A listing of the packages you will need is given below:

    • Under the X11 category, install:

    • X-start-menu-icons (optional but recommended, adds icons for X Clients to the Start menu)

    • xinit (required, scripts for starting the X server: xinit, startx, startwin (and a shortcut on the Start Menu to run it), startxdmcp.bat )

    • xorg-docs (optional, man pages)

    • xorg-server (required, the Cygwin/X X Server)

    • Under the Graphics catagory, install the giflib, libpng, jpeg and libtiff packages (the latest non-beta version of libtiff at the time of this writing is libtiff5)
    • Under Editors, install vim.
    • Under Web, instal wget
    • Finally, install rxvt in the Shells category (just rxvt, not any of the rxvt-unicode-* packages)

    

16. Click Next to begin the download process, you may want to try another mirror if you see a "Connecting" message on this screen for a long period of time:

    

17. After the packages are downloaded, setup will automatically begin to install them:

    

18. I highly recommend allowing Cygwin Setup to create Desktop and Start Menu icons for you; these icons simply launch a bash shell:

    

19. Click Finish to close the setup program.

Step 2: Install FontForge

Now that you have successfully installed Cygwin and the libraries necessary to run FontForge, it is now to time to install FontForge itself. This part is not obvious, and is the main reason why I wrote these instructions.

There are two ways you can install FontForge: using the Cygwin setup program you just downloaded (not-so-easy) or using the "Unofficial Windows Port".

If you get stuck, there is more help available at the Official Cygwin Ports page.

Using the Cygwin Setup

This is my preferred method for installing FontForge, but may not always be successful because the download process stalls sometimes. If it doesn't work the first time, quit the process and try again. Note that I found that installing it this way works best at around 7:00 AM - 4:00 PM EST. I believe that this is because the Cygwin Ports server is busier at night, but I am just guessing. Your results may vary.

If you get really frustrated installing it this way, try the "Unofficial Windows Port" method instead.

1. Go to the directory you saved Cygwin's setup.exe when you installed Cygwin.
2. Right click on setup.exe and choose "Create Shortcut..."
3. Right click on the shortcut that you created and choose "Properties". In the shortcut dialogue, change the Target field from setup.exe to setup.exe -K http://cygwinports.org/ports.gpg

   

4. Double-click on the new shortcut. Go through the steps 3 - 12 of the installation instruction of Cygwin.
5. When you get to step 13, you must enter ftp://ftp.cygwinports.org/pub/cygwinports into the User URL field and click Add button. When you do, it will be added to the list of download sites. Ensure that the new site is the only one chosen (sometimes two will be chosen at this point, the one you just added and one you used to install Cygwin), and click Next.

   

   Note that you will see this progress dialogue longer than you did in when installing Cygwin:

   

   Be patient. You should eventually get to the next dialogue. If it gives you an error about the version of setup.bz2 being earlier than the previous one or something similar, ignore it.
6. At this point, the Select Packages will appear. Go the Graphics category and choose fontforge:

   

   Click Next.
7. You will see a dialogue similar to this:

   

   This is just showing you it has to download the fontforge's dependencies as well. Just click Next
8. You will see the download dialogue:

   

   This is the part that may take a long time to run, and may even stall. Let it run for a while. If it gets stuck for a long time, you may want to choose a different mirror.
9. If you complete the install process, you should now have successfully installed fontforge. To test your install, do the following:
   • Go to the Start Menu, choose "Programs" and in the "Cygwin" Program Group, launch rxvt-native.
   • From the command line, enter the startxwin command. You should see the following output

     Welcome to the XWin X Server
     Vendor: The Cygwin/X Project
     Release: 1.9.4.0 (10904000)
     Package version 1.9.4-1 built 2011-02-07
     
     XWin was started with the following command line:
     
     X :0 -multiwindow 
     
     _XSERVTransSocketOpenCOTSServer: Unable to open socket for inet6
     _XSERVTransOpen: transport open failed for inet6/NB07023:0
     _XSERVTransMakeAllCOTSServerListeners: failed to open listener for inet6
     winInitializeScreens - 1
     winInitializeScreen - 0
     (II) xorg.conf is not supported
     (II) See http://x.cygwin.com/docs/faq/cygwin-x-faq.html for more information
     LoadPreferences: /home/haw5855/.XWinrc not found
     LoadPreferences: Loading /etc/X11/system.XWinrc
     LoadPreferences: Done parsing the configuration file...
     winGetDisplay: DISPLAY=:0.0
     winDetectSupportedEngines - Windows NT/2000/XP
     winDetectSupportedEngines - DirectDraw installed
     winDetectSupportedEngines - Allowing PrimaryDD
     winDetectSupportedEngines - DirectDraw4 installed
     winDetectSupportedEngines - Returning, supported engines 0000001f
     winSetEngine - Multi Window or Rootless => ShadowGDI
     winScreenInit - Using Windows display depth of 32 bits per pixel
     winAllocateFBShadowGDI - Creating DIB with width: 1280 height: 800 depth: 32
     winFinishScreenInitFB - Masks: 00ff0000 0000ff00 000000ff
     winInitVisualsShadowGDI - Masks 00ff0000 0000ff00 000000ff BPRGB 8 d 24 bpp 32
     null screen fn ReparentWindow
     null screen fn RestackWindow
     InitQueue - Calling pthread_mutex_init
     InitQueue - pthread_mutex_init returned
     InitQueue - Calling pthread_cond_init
     InitQueue - pthread_cond_init returned
     winInitMultiWindowWM - Hello
     winInitMultiWindowWM - Calling pthread_mutex_lock ()
     winMultiWindowXMsgProc - Hello
     Screen 0 added at virtual desktop coordinate (0,0).
     winMultiWindowXMsgProc - Calling pthread_mutex_lock ()
     MIT-SHM extension disabled due to lack of kernel support
     XFree86-Bigfont extension local-client optimization disabled due to lack of shared memory support in the kernel
     (II) AIGLX: Loaded and initialized /usr/lib/dri/swrast_dri.so
     (II) GLX: Initialized DRISWRAST GL provider for screen 0
     winPointerWarpCursor - Discarding first warp: 640 400
     (--) 3 mouse buttons found
     (--) Setting autorepeat to delay=500, rate=31
     (--) Windows keyboard layout: "00000409" (00000409) "US", type 4
     (--) Found matching XKB configuration "English (USA)"
     (--) Model = "pc105" Layout = "us" Variant = "none" Options = "none"
     Rules = "base" Model = "pc105" Layout = "us" Variant = "none" Options = "none"
     winInitMultiWindowWM - pthread_mutex_lock () returned.
     winMultiWindowXMsgProc - pthread_mutex_lock () returned.
     winMultiWindowXMsgProc - pthread_mutex_unlock () returned.
     winGetDisplay: DISPLAY=:0.0
     winMultiWindowXMsgProc - DISPLAY=:0.0
     winInitMultiWindowWM - pthread_mutex_unlock () returned.
     winProcEstablishConnection - Hello
     winInitClipboard ()
     winClipboardProc - Hello
     DetectUnicodeSupport - Windows NT/2000/XP
     winProcEstablishConnection - winInitClipboard returned.
     winGetDisplay: DISPLAY=:0.0
     winInitMultiWindowWM - DISPLAY=:0.0
     winGetDisplay: DISPLAY=:0.0
     winClipboardProc - DISPLAY=:0.0
     winMultiWindowXMsgProc - XOpenDisplay () returned and successfully opened the display.
     winInitMultiWindowWM - XOpenDisplay () returned and successfully opened the display.
     winClipboardProc - XOpenDisplay () returned and successfully opened the display.
     

     You should see the XWindows icon in the tray .
   • Next enter the command fontforge & (include the & if you want to run fontforge in the background so that you can enter in other commands into rxvt later). You will see the fontforge splash screen as well as a file dialogue box.
     

     The FontForge Splash Screen with File Dialogue

     If this is what you see, then congratulations, you installed it correctly!
   • If you get an error similar to "error while loading shared libraries: ?: cannot open shared object file", then you forgot to install one of the dependencies. You can find out which one is missing by entering in the command cygcheck fontforge. You should see output similar to this:

     $ cygcheck fontforge
     Found: C:\cygwin\bin\fontforge.exe
     Found: C:\cygwin\bin\fontforge.exe
     C:\cygwin\bin\fontforge.exe
       C:\cygwin\bin\cygfontforge-1.dll
         C:\cygwin\bin\cyggutils-1.dll
           C:\cygwin\bin\cyggunicode-3.dll
             C:\cygwin\bin\cygwin1.dll
               C:\Windows\system32\ADVAPI32.DLL
                 C:\Windows\system32\msvcrt.dll
                   C:\Windows\system32\KERNELBASE.dll
                     C:\Windows\system32\ntdll.dll
                   C:\Windows\system32\API-MS-Win-Core-Console-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-DateTime-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Debug-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-ErrorHandling-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Fibers-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-File-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Handle-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Heap-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Interlocked-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Localization-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-LibraryLoader-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Memory-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Misc-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-NamedPipe-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-ProcessEnvironment-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-ProcessThreads-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Profile-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-String-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Synch-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-SysInfo-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-Util-L1-1-0.dll
                 C:\Windows\system32\API-MS-WIN-Service-Core-L1-1-0.dll
                 C:\Windows\system32\API-MS-WIN-Service-winsvc-L1-1-0.dll
                 C:\Windows\system32\API-MS-WIN-Service-Management-L1-1-0.dll
                 C:\Windows\system32\API-MS-WIN-Service-Management-L2-1-0.dll
                 C:\Windows\system32\API-MS-Win-Core-LocalRegistry-L1-1-0.dll
                 C:\Windows\system32\API-MS-Win-Security-Base-L1-1-0.dll
                 C:\Windows\system32\KERNEL32.dll
                   C:\Windows\system32\API-MS-Win-Core-RtlSupport-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-IO-L1-1-0.dll
                   C:\Windows\system32\API-MS-Win-Core-ThreadPool-L1-1-0.dll
                 C:\Windows\system32\RPCRT4.dll
                   C:\Windows\system32\API-MS-Win-Core-DelayLoad-L1-1-0.dll
             C:\cygwin\bin\cyggcc_s-1.dll
             C:\cygwin\bin\cygiconv-2.dll
           C:\cygwin\bin\cygintl-8.dll
           C:\cygwin\bin\cygpng12.dll
             C:\cygwin\bin\cygz.dll
         C:\cygwin\bin\cygfreetype-6.dll
         C:\cygwin\bin\cygspiro-0.dll
         C:\cygwin\bin\cyguninameslist-0.dll
         C:\cygwin\bin\cygxml2-2.dll
         C:\cygwin\bin\libpython2.6.dll
       C:\cygwin\bin\cyggdraw-4.dll
         C:\cygwin\bin\cygX11-6.dll
           C:\cygwin\bin\cygxcb-1.dll
             C:\cygwin\bin\cygXau-6.dll
             C:\cygwin\bin\cygXdmcp-6.dll
         C:\cygwin\bin\cygXft-2.dll
           C:\cygwin\bin\cygXrender-1.dll
           C:\cygwin\bin\cygfontconfig-1.dll
             C:\cygwin\bin\cygexpat-1.dll
         C:\cygwin\bin\cygXi-6.dll
           C:\cygwin\bin\cygXext-6.dll
         C:\cygwin\bin\cygcairo-2.dll
           C:\cygwin\bin\cygglitz-1.dll
           C:\cygwin\bin\cygpixman-1-0.dll
           C:\cygwin\bin\cygxcb-render-util-0.dll
             C:\cygwin\bin\cygxcb-render-0.dll
         C:\cygwin\bin\cygpango-1.0-0.dll
           C:\cygwin\bin\cygglib-2.0-0.dll
             C:\cygwin\bin\cygpcre-0.dll
           C:\cygwin\bin\cyggmodule-2.0-0.dll
           C:\cygwin\bin\cyggobject-2.0-0.dll
             C:\cygwin\bin\cyggthread-2.0-0.dll
         C:\cygwin\bin\cygpangocairo-1.0-0.dll
           C:\cygwin\bin\cygpangoft2-1.0-0.dll
         C:\cygwin\bin\cygpangoxft-1.0-0.dll
     cygcheck: track_down: could not find cyggif-4.dll
     
     cygcheck: track_down: could not find cygjpeg-7.dll
     
     cygcheck: track_down: could not find cygtiff-5.dll
     

     In this case, the missing libraries are libgif, jpeg and libtiff. Go back to step 1 and ensure that you install them (Cygwin's setup will allow you to install them, even after you did the first install).

Using "unofficial fontforge-mingw"

A Japanese developer has posted a MingW port. This developer of the mingw port has recently made a standalone version of the Cygwin version of fontforge available as well, and I encourage you to download the Cygwin one instead of the MingW one, since it seems to be a bit more up-to-date. Both of these ports are available on the developer's Geocities Japan site (yes folks ... you read that right. Geocities still exists in Japan!) It is dead simple to install fontforge using this package:

1. Download the package from the project's homepage. Even though the page is in Japanese, the Dowload link is in English. :-)
2. unzip the package
3. To test if the installation was successful, go into the directory that contains the package and run the fontforge.bat batch file.

Even thought this method doesn't really need the fullblown version of Cygwin (since it is designed to be standalone), I suggest installing Cygwin in order to use the the CSS3 Font Converter.

Futher Reading

• Cygwin User's Guide
• A Command Line Primer for Beginners

Copyright Notice

Some of the contents of this post have been taken from the Cygwin/X User's Guide, copyright © 2000 Harold L Hunt II and copyright © 2009, 2010, 2011 Jon Turney. As per that document's license, permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts.

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!!!!!
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.

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

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. If you don’t have it already, install Java (it is required for Batik). If you are not sure how to do this, there are installation instuctions available for Windows, OS X, and Ubuntu Linux).
4. Download the latest version of Batik. Make sure you remember where you unpack the archive — you’ll need this later.
5. Download EOTFast (if you develop using Windows) or ttf2eot (for OS X and Linux, installation instructions are here).
6. Download the sfnt2woff package (this page has packages for Windows and OS X, as well as the source that one can compile for Linux).
7. Download the CSS3 Font Converter and unpack the contents in your path someplace.
8. 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.                                          #
   #########################################################################
   
   # Linux and Mac users, this directory should be changed to be of this form:
   # BATIK_DIR="/Users/webtest/src/batik".  Windows should use the form below.
   BATIK_DIR='c:\Program Files\Batik\batik-1.7'
   
   # 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/"
   
   ....
   

   You have to change the value of BATIK_DIR to the directory that contains the Batik code (ensure that it includes the batik-1.7 directory at the end). 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.

9. 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');
   }
   

Notes

1. FontForge 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.
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).
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

• Safari, Chrome and Opera will render the font normally without italicizing it.
• Internet Explorer and Firefox will attempt to italicize the font, but Internet Explorer will slant the font at a 20° angle while Firefox implements a 10° slant.

Internet Explorer 6.0	Firefox 3.6	Safari 4/Chrome 5/Opera 10

This inconsistency is quite annoying from a user-experience point of view. However, there is a way of leveling the playing field by using the CSS3 transform property. And even though Internet Explorer doesn’t recognize transform, there is a workaround without using JavaScript using the Matrix Visual Filter.

The CSS

When I was a calligraphy student, I learned that the Italics script was to be written on a 10° angle. Using the CSS3 transform property, this can be achieved by using the skewX() function:

#content h1 em {
    font-family: "Graublau Web Bold", Arial, sans-serif;
    font-style: normal;

    -moz-transform:    skewX(-10deg);
    -o-transform:      skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    transform:         skewX(-10deg);

    display: inline-block;

}
	

The display: inline-block is there since Safari, Chrome and Opera will not allow transformations on an inline element.

But what about Internet Explorer? I could use my cssSandpaper script, but it is really simple to do without it:

#content h1 em {
    font-family: "Graublau Web Bold", Arial, sans-serif;
    font-style: normal;

    -moz-transform:    skewX(-10deg);
    -o-transform:      skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    transform:         skewX(-10deg);

    display: inline-block;

    /* IE8+: must be on one line. */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";

    /* IE6 and 7 */
    filter: progid:DXImageTransform.Microsoft.Matrix(
             M11=1,
             M12=-0.1763269807084645,
             M21=0,
             M22=1,
             SizingMethod='auto expand');
}
	

This is the Microsoft Matrix Filter equivalent of skewX(10deg). Let’s take a look at how this works in all the major browsers:

Internet Explorer 6.0+	Firefox 3.5+	Safari 4+	Chrome 5+	Opera 10.5+

Isn’t that nice and consistent? The screenshots are from the Windows versions of the browsers, but you can expect the same results for Mac and Linux versions as well.

Is This Really Italics?

Not really. Technically, we are creating an oblique variant of this font. The Wikipedia entry for Oblique fonts states that many sans-serif fonts do not have italic variants, so this technique will be a useful one in a web developers toolkit.

Caveats

• If you are going to make a few words in a row oblique, make sure you wrap the <i> and <em> tags around each word. This is because the display: inline-block rule treats multiple words wrapped in one set of these tags as one word, which will cause problems when you want the words to wrap to the next line.
  

  Wrapping multiple words with one <em> tag

  Wrapping multiple words with separate <em> tags

• If the oblique text does not have a solid background color, it will appear “blocky” or “pixely” in IE. To fix this, you must use IE’s Chroma Visual Filter, as described in my last blog post, How to Make ClearType, @font-face Fonts and CSS Visual Filters Play Nicely Together.
• In IE, multiple oblique words may appear to have more white space than the other browsers. In this case you may need to create IE-only CSS rules that implement negative left margin on each word, using a solution like Paul Irish’s Conditional CSS Pattern.
• Webkit browsers apply the slanting correctly if a font-style: normal is declared in the @font-face rule for the font (thanks to Raph Levien for commenting on this below.

Update (Sept. 3, 2010)

• This article originally has the filter and -ms-filter rules reversed, which is against Microsoft’s best practices for IE8. This error has been corrected.
• Thanks to Zoe Mickley Gillenwater for pointing out that IE8 needs to have all the filter functions (i.e. all the stuff in the double quotes) on one line.

The modern web developer wants to be able to use a variety of CSS3 effects together, but sometimes doing this in IE can be challenging, especially if you don’t want to use JavaScript. Let’s take a look a common problem with IE: blocky text in IE when using IE Visual filters on a block of text. For example, if you’ve ever tried to do the cross-browser CSS opacity trick to implement opacity in IE6, this problem manifests itself when the text is styled with no background color. A developer uses this well-known cross browser CSS-foo to make this work:

#badAntiAliasing {
	opacity: 0.5;

        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

        /* IE 6,7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}

And it looks great in every browser, but it looks like crap in Internet Explorer 6 with ClearType turned on. It is especially pronounced when using @font-face embedding with fonts that assume that some sort of anti-aliasing technology is being used. The example below uses Graublau Sans Web with the Alpha filter to illustrate the issue:

Opacity Solution in IE	Opacity Solution in every other browser

This has been a known problem with IE ever since 2006 when ClearType’s product manager, Peter Gurevich, announced on the IEBlog their decision to disable ClearType on elements that use any Visual Filter. If you read the comments on this blog article, you will see many upset developers. I was one of them, since this not only affects the Alpha Filter, but all of IE’s Visual Filters, some of which I use in cssSandpaper to get IE to support CSS3 properties like transform.

Today, however, we can rejoice. There is a usable workaround that will make ClearType rendered fonts look nice when using Visual Filters. In our example above, here is what needs to be done:

body.ie6 #goodAntiAliasing,
body.ie7 #goodAntiAliasing,
body.ie8 #goodAntiAliasing {
	background-color: white;
}

#goodAntiAliasing {
	opacity: 0.5;

        /* IE 8: yes, it is ugly but it has to be on one line. :-( */
        -ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='white') progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

        /* IE 6,7 is more flexible: it can be on multiple lines. */
	filter: progid:DXImageTransform.Microsoft.Chroma(color='white')
                progid:DXImageTransform.Microsoft.Alpha(opacity=50);

}

What is going on here?

1. The first rule sets the background color of the container to a color that is represents the color of the majority of the background image on the page. Note that this rule uses Paul Irish’s Conditional CSS Pattern to serve it only to IE.
2. The second rule executes two of IE’s Visual Filters:
   • the Chroma Visual Filter, which tells IE “Please make this color transparent”. The color we choose to make transparent is the one we selected in the first rule.
   • the Alpha Visual Filter, which does the opacity trick

Default Opacity in IE	New Opacity Solution in IE

These filters must be in the order given, and not the other way around. Note also that care must be given that the color chosen to be transparent should be the average color of what is behind the text being styled, otherwise you will get less than optimal results. If this background is a complex image, just use the colour that’s used most often.

This fixes not only the IE opacity problem, but also issues with other Visual Filters, such as Matrix. I will be updating cssSandpaper to use this trick so that transformed objects in IE won’t look so blocky.

Take a look at the solution in action (make sure you look at it in IE in order to get the full effect)

Although this blog wasn’t meant to be a forum on just CSS font-embedding, it is a topic of great interest to me and has been the inspiration of a few articles here (my article on JavaScript font-smoothing detection being the latest). As a result, I have been very fortunate in meeting a lot of interesting and like-minded individuals who want to make the web a better place for typography.

One of the more vocal ones, Paul Irish, asked me to join a project that will allow developers to find ways to make web type look better right now. Other members include web font blogger Tim Brown of Nice Web Type and Ethan Dunham of the excellent font resource Font Squirrel. The result is The Type Rendering Project – we’ve set some goals and would like to open up dialogue with you to fulfill them. We’re asking for your participation, and lots of expert advice, to fulfill these intentions. If you are interested and are a Twitter user, follow us – and more importantly, tell folks you care about how type looks on websites.

Interested in making web typography look better?

Read about The Type Rendering Project!

Examples of font-smoothing and subpixel-rendering as performed by technologies like ClearType. Image Credit: Wikimedia Commons users Pandries and Kalan

In an earlier article, I mentioned that Boing-Boing had a few issues when they wanted to use @font-face embedding inside their website. In short, the problem was that some fonts look bad on computer monitors without font-smoothing enabled in the operating system. This brought on a lot of discussion as to whether there was a way to detect whether or not font-smoothing was being used using JavaScript. I initially thought there wasn’t a way, but after seeing a promising but incomplete method of detecting font-smoothing, I spent a few days devising a way to do it.

Internet Explorer Does Something Easily (For a Change)

Paul Irish mentioned to me and a few other colleagues that he came across a page using an Active X control that detects font-smoothing in IE. I was so hopeful … until I realized that this only works on browsers that have come into contact with Microsoft’s online Cleartype Tuner, which I visited with my copy of IE months before. If a users had never visited this page, the script would fail.

I was more disappointed because Googling “javascript cleartype” did not point to anything useful. However, searching for “javascript font-smoothing” pointed me to an article that told me about Internet Explorer’s screen.fontSmoothingEnabled property. This gives us what we need … but only in Internet Explorer. How on Earth can we detect font-smoothing in other browsers, and in non-Windows operating systems?

Canvas to the Rescue

Letter 'O' , Arial font, 32 px, rendered both without (left) and with (right) font-smoothing

I then thought about about the screenshots I made for the @font-face in Depth article. Can a browser render a black glyph and detect if there is some sort of non-black pixel colouring around the its edges of the glyphs? A human can tell the difference: if there are some non-black pixels around the edge of the glyph, it must be using font-smoothing.

But web browsers can do this too! Just have the browser draw a letter in black inside a canvas tag, and then have it sift through the canvas’ pixels to see if there are any that are not pure black or pure white (more accurately, have the browser check the alpha channel to see if there are any semi-transparent pixels, which have a value that is not 0 or 255). If there are no semi-transparent pixels, then the algorithm assumes that no font-smoothing is being used. I wrote an JavaScript routine that does this – it starts from co-ordinate (8,1) and scans left to right, to the bottom of the canvas (any point on near the top on the left-hand side of the canvas would have done as well).

The result is a JavaScript object, TypeHelpers, which implements this routine in one method, hasSmoothing():

var TypeHelpers = new function(){

   // I use me instead of this.  For reasons why, please read:
   // http://w3future.com/html/stories/callbacks.xml
   var me = this;

   me.hasSmoothing = function(){

      // IE has screen.fontSmoothingEnabled - sweet!
      if (typeof(screen.fontSmoothingEnabled) != "undefined") {
         return screen.fontSmoothingEnabled;
      } else {

         try {

            // Create a 35x35 Canvas block.
            var canvasNode = document.createElement('canvas');
            canvasNode.width = "35";
            canvasNode.height = "35"

            // We must put this node into the body, otherwise
            // Safari Windows does not report correctly.
            canvasNode.style.display = 'none';
            document.body.appendChild(canvasNode);
            var ctx = canvasNode.getContext('2d');

            // draw a black letter 'O', 32px Arial.
            ctx.textBaseline = "top";
            ctx.font = "32px Arial";
            ctx.fillStyle = "black";
            ctx.strokeStyle = "black";

            ctx.fillText("O", 0, 0);

            // start at (8,1) and search the canvas from left to right,
            // top to bottom to see if we can find a non-black pixel.  If
            // so we return true.
            for (var j = 8; j <= 32; j++) {
               for (var i = 1; i <= 32; i++) {

                  var imageData = ctx.getImageData(i, j, 1, 1).data;
                  var alpha = imageData[3];

                  if (alpha != 255 && alpha != 0) {
                     return true; // font-smoothing must be on.
                  }
               }

            }

            // didn't find any non-black pixels - return false.
            return false;
         }
         catch (ex) {
            // Something went wrong (for example, Opera cannot use the
            // canvas fillText() method.  Return null (unknown).
            return null;
         }
      }
   }

   me.insertClasses = function(){
      var result = me.hasSmoothing();
      var htmlNode = document.getElementsByTagName('html')[0];
      if (result == true) {
         htmlNode.className += " hasFontSmoothing-true";
      } else if (result == false) {
            htmlNode.className += " hasFontSmoothing-false";
      } else { // result == null
            htmlNode.className += " hasFontSmoothing-unknown";
      }
   }

}

// if EventHelpers.js is included, insert the hasFontSmoothing CSS classes
if (window.EventHelpers) {
   EventHelpers.addPageLoadEvent('TypeHelpers.insertClasses')
}

Note the object also has an insertClasses() method. This method, when run, adds a class to the html tag:

• hasFontSmoothing-true if font-smoothing is being used
• hasFontSmoothing-false if it is not
• hasFontSmoothing-unknown if the user agent is unable to tell

This makes it easy for developers who don’t want to mess with JavaScript code and just want to use CSS.

Also note the EventHelpers.addPageLoadEvent() call at the end of the code. This method (which is part of EventHelpers.js, included with the archive below) implements Dean Edwards’ window.onload alternative which doesn’t wait for all the objects in the page to be loaded. I use this implementation to execute TypeHelpers.insertClasses() when the page loads so any font-detection CSS rules will work right away. Please feel free to change this code to use the equivalent function call in Dojo, Prototype, jQuery, or whatever JavaScript code framework you prefer.

Example #1: JavaScript Font Smoothing Detection

Enough of theory … let’s look at it in practice! To show how to detect font-smoothing with JavaScript, I created a page that, when the page is loaded, checks to see if it can tell if font-smoothing has been implemented and tells the user. Here is the code that does this check:

function displayInfo() {

   var message;
   var isFontSmoothingOn = TypeHelpers.hasSmoothing();
   if (isFontSmoothingOn == true) {
      message = "This browser is using a font-smoothing technology";
   } else if (isFontSmoothingOn == false) {
      message = "This browser isn't using a font-smoothing technology"
   } else {
      message = "We could not detect if font-smoothing is being used."
   }
   document.getElementById('detectInfo').innerHTML = message;

}

window.onload = displayInfo;

See the above code in action

Example #2: CSS Font Smoothing Detection

As implied earlier, this library can help CSS use different fonts if the browser is using a font-smoothing technology. For example, using the following CSS will allow a browser to use the Droid Sans embedded font only if it using font-smoothing — otherwise, it will use Arial:

@font-face {
	font-family: "Droid Sans";
	src: url("/shared/fonts/DroidSans/DroidSans.eot");
	src: local("Droid Sans"),
	     local("Droid Sans"),
	     url("/shared/fonts/DroidSans/DroidSans.ttf") format("truetype");
}

body {
	font-family: "Arial", "Helvetica", sans-serif;
}

html.hasFontSmoothing-true body {
	font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}

We can also serve special content to users depending on the way fonts are rendered on their browser. We first create content for all three scenerios (browser uses font-smoothing, browser doesn’t use font-smoothing, and the “we cannot detect” case) and wrap the content inside <code>div</code> tags using appropriate CSS classes:

<div class="fontSmoothingMessage initiallyHidden">
    <p>You browser <strong>is</strong> rendering this page
    with font-smoothing. Because of that, we will attempt
    to serve up the Droid Sans font to render this page,
    because we think it looks cool. If you are using a
    browser (such as Google Chrome) that cannot render
    downloaded True Type fonts by default, then the page
    will be rendered using Arial instead.</p>
</div>

<div class="noFontSmoothingMessage initiallyHidden">
    Your browser <strong>is not</strong> rendering this
    page with font-smoothing. It is for that reason we have
    decided to use the plain old Arial font to render this
    page, because it is hinted for use for displays that
    don't employ a font-smoothing technology.
</div>

<div class="unknownFontSmoothingMessage initiallyHidden">
    <strong>We are not sure</strong> if your browser is
    rendering this page with a font-smoothing technology.
    It is for that reason we have decided to use the plain
    old Arial font to render this page, because it is
    hinted for use for displays that don't employ a
    font-smoothing technology.
</div>

Note all the div tags are members of the class initiallyHidden. This class will be used to hide all font-smoothing related content until the script kicks in.

However, all this will not work unless we use the following CSS code:

.initiallyHidden {
	display: none;
}

html.hasFontSmoothing-true .fontSmoothingMessage,
html.hasFontSmoothing-false .noFontSmoothingMessage,
html.hasFontSmoothing-unknown .unknownFontSmoothingMessage {
	display: block;
}

Of course, this whole soltution relies on whether JavaScript being turned on in the user’s browser. This should be kept in mind when implementing this solution.

See the above code in action

Download

All code used in this article can be downloaded below (Note: version 1.0 was missing the Droid Sans Fonts which have now been put into the archive. Thanks to John Faulds for pointing this out).

TypeHelpers.js v.1.0a and sample code.

With the help of Tim Brown, it was determined that the code detected font-smoothing correctly in the following browsers:

• Internet Explorer 6 and up on Windows XP and higher.
• Firefox 3.5 and higher on Windows XP and higher, Mac OS X 10.4 and higher, and Ubuntu Linux 9.10 (and probably lower)
• Chrome 3.0 on Windows XP and higher
• Safari 4.0.3 on Windows XP and higher and Mac OS X 10.4 and higher

This script cannot detect font-smoothing in any version of Opera (at the time of this writing, this includes all versions up to 10.10), since it cannot write text inside the canvas element in a way we can poll the pixels afterwards. If anyone can find a way of making it work with Opera, please write a comment below — I’d love to be able to support this browser.

Testing Caveats

Testing font-smoothing in most Windows web browsers is easy since it can be turned off inside the Display control panel. However, when using Safari for Windows, it is necessary to navigate inside Safari’s Appearance preferences and set the Font-smoothing option to Windows Standard. This is because by default, Safari uses it’s own built-in font-rendering engine which doesn’t seem to render aliased fonts. In Mac OS X, it seems anti-aliasing only works for fonts below a certain size, so aliased fonts don’t seem to be an issue with that operating system. In Ubuntu Linux I have yet to find a way of shutting of font-smoothing. If anyone knows a way, please let me know.

SVG fonts for Opera and Chrome

Jonathan Snook wrote a great article regarding Opera 10 and Google Chrome supporting SVG fonts (Chrome can load them without any pesky command line switch!).  He mentions how to convert TrueType fonts to this format using Batik, and that by removing all the <hkren> elements inside the file’s XML can make the font smaller than the original TrueType file.  Too bad the browsers don’t support this format.

Opera’s buggy implementation

I noticed after I launched my first @font-face article that Opera was not loading the fonts on my blog when users visited more than one page. It turns out that Opera 10′s implementation of @font-face is a little buggy. When you feed it a page with an embedded font, you may not see the embedded fonts properly, like in the screenshot below:

Opera sometimes doesn't load the font at all, and removes other styling (click to enlarge).

According to Opera, this happens when “specifying different weights and styles for a single font-family name”. Håkon Wium Lie, the company’s Chief Technology Officer , has described a work-around until the company can fix the problem properly.

I am debating whether to implement the work around on my site, or to wait for Opera to fix the problem and patch all Opera 10 installations via auto-update (I’m leaning towards the latter).

Performance Issues With Font Embedding

One of the comments on the last article came from Steve Souders who had performance concerns with font-embedding. Paul Irish came back with information showing the when browsers load the fonts, and what they do before the font is loaded.  He also shows how to use JavaScript to make the loading behaviour consistent between browsers.

The performance issues with font-embedding is something I am going to be keeping an eye on, especially when it comes to font-services, which the OpenType site believes will be the future of web font distribution for commercial fonts. Although it doesn’t seem like much of an issue currently (my blog seems to load quickly), I don’t want to do anything that would slow down my web applications – especially if I am using them just to make the text look a little prettier.

Windows XP Rendering Issues

Boing-Boing had a bad experience with font-embedding. Turns out they got a lot of complaints when they decided to incorporate it into their website. The reason: some users didn’t have ClearType turned on, and the font Boing-Boing chose looked “like ass” without ClearType.

Below are screenshots of this site without ClearType on:

Internet Explorer without ClearType

Firefox without ClearType

The article stated that there are quite a few XP computers which apparently don’t have ClearType on by default. I wonder if there are any stats to back that up. If so, then developers embed fonts into pages should test that scenario as well. It does look different.

Updates

• (Oct 13, 2009): I have written a follow up article which explores SVG fonts,
  Opera 10 issues, and more
• (Oct 28, 2010): This article has been translated into Belorussian by movavi.

Photo by marta.b (Source: Flickr)

When I told one of my co-workers how excited I was that almost all the major browser vendors now supported font-embedding in their products, I got the same reaction from her that Bert from Sesame Street got when he told Ernie how exciting he thought bottle cap collecting was (yes, gratuitous ridicule was involved).  Now, while I can somewhat understand her disinterest (she is not a front-end web developer, but a Java programmer), I defend my enthusiasm by stating here that fonts are a really important part of web design, and the fact that we can now theoretically choose any font to embed inside our web pages and applications is something to celebrate.

Sure, workarounds such as sIFR and Cufón have existed for quite a while now, but they have drawbacks (they both are best used only for headings, and Cufón  doesn’t do well at allowing copying and pasting its content).  If you really want to embed fonts in your webpages, I believe that @font-face is the safest, future-proof option.

Why care about fonts?

My Java developer colleague may not understand why fonts are important, but she is a regular reader of  The New Yorker.  Even though its website doesn’t use @font-face embedding (the standard New Yorker font is embedded in site using images), the developers of the site obviously know why fonts are important:

• Fonts identify who the content belongs to. Just take a look at the content and without looking at the URL bar, you know exactly where you are – that font is highly integrated into that organization’s identity and branding.  Replace the New Yorker font with Arial and it’ll look like any old website.
• Fonts given an emotional association to the content. The content has an air of authority because of the font it uses (after all, it looks like it was written by The New Yorker). It is the reason why phishing sites use the fonts, colours and logos of the banks they are posing as.
• Fonts can help (or hinder) the legability of content. Scanning the content, you can tell where the article titles are, where the navigation is, and what section each of the articles belong to.  This is all because of the way fonts are used on the site.

The New Yorker's website is a great example of how to use fonts effectively on the web.

The New Yorker uses images in order to display fonts.  Using font embedding effectively would save on bandwidth, since one font download could be used for all the headings on the page.

Font formats supported

Firefox 3.5+ , Safari 3.1+, Opera 10+ and Internet Explorer 4.0+ all support @font-face embedding (Google’s Chrome 3.0 beta does as well, but users will have to start it up in a special mode to make it work in the short term). They all support the use of TrueType (.ttf) and OpenType (.otf) fonts … except for Internet Explorer which only supports the proprietary Embedded Open Type (.eot) format. There aren’t as many fonts available in this format and the tool Microsoft gives out that converts .ttf fonts to .eot, called WEFT, is quite frustrating to use, and even crashes on Vista. There is, however, an excellent command-line tool, ttf2eot, that does a much better job. Both WEFT and ttf2eot only convert TrueType to Embedded Open Type – if you want to convert an OpenType font to Embedded Open Type, it is necessary to use FontForge, a free font-editing tool, to convert the font to TrueType first, and then use ttf2eot to convert the resultant font to .eot format. Although this method is roundabout and results in loss of detail due to the way the font formats store information, it is the only way I know to do this conversion.

For more detail on how to perform .eot font conversions using ttf2eot and FontForge, check out Edward O’Connor’s great article How to create EOT files without Microsoft WEFT

Where to get fonts you can legally use in web pages.

Although it is now technically possible to embed almost any font inside a web page, it is important to remember that if you use a commercial font for this purpose, you must have a license to do this. Since putting a font on a website will allow anyone on the Web to download it, a lot of font foundries currently do not allow their fonts to be used for web page embedding. It is for this reason that the browser vendors have been reluctant to implement this technology into their products until recently (font embedding is part of the CSS2 specification, which has been around since 1998).

Luckily, there are a few sites that are sprouting up that have done the initial work for you by listing fonts that allow font embedding on web pages legally.  The ones that I have visited include:

• Font Squirrel’s @font-face page, which include @font-face kits that include an .eot as well as an .otf or .ttf font.  Each kit also includes a stylesheet which can be linked directly into your document so you can use the font with minimal coding.
• Smashing Magazine’s has an excellent article, 40+ Excellent Freefonts For Professional Design
• Kernest.com hosts a whole slew of fonts that can be used for font-embedding.
• Webfonts.info has a page dedicated to fonts available for @font-face embedding.

Note that whenever you use any font, make sure you check the license that comes with it. Some fonts, even if their license allows for font embedding, may not allow you to use it for commercial purposes. Others may, but only for a fee. To be safe, check the documentation that comes with the font.

How to insert a font into your webpage

Once you have a font that you’d like to insert into your webpage, you first have to declare it inside your CSS stylesheet:

@font-face {
	font-family: 'Droid Sans';

        /* for IE */
	src: url('/shared/fonts/DroidSans/DroidSans.eot');

        /*
         * for non-IE: first see if the font exists locally on the browser's
         * computer.  If so, use that copy of the font.  Otherwise, load it
         * from the server
         */
	src: local('Droid Sans'),
	     url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}

It is very important to note here that order counts.  There are variations of this CSS syntax, but I have settled on this syntax for the reasons described in Paul Irish’s article Bulletproof @font-face syntax.

After you declare the font, you can use it inside any of your selectors as you would use any other font:

body {
     font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
}

Note that it is still necessary to use alternative fonts – this is so that user agents that don’t support @font-face will still show an appropriate, similar looking font.

Some font families are contained in not just one file.  For example, Droid Sand has a bold variant that is stored in a separate TrueType file (the .eot file used by Internet Explorer in the above example contains both the regular and bold variants).  The bold variant of Droid Sans can be declared correctly in your stylesheet like this:

@font-face {
	font-family: 'Droid Sans';
	src: url('/shared/fonts/DroidSans/DroidSans.eot');
	src: local('Droid Sans'),
	     local('Droid Sans'),
	     url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
}

/* Bold declaration only for non-IE browsers */
@font-face {
	font-family: 'Droid Sans';
	src: local('Droid Sans Bold'),
	     local('Droid Sans-Bold'),
	     url('/shared/fonts/DroidSans/DroidSans-Bold.ttf') format('truetype');
	font-weight: bold;
}

Browser Differences

To effectively illustrate how differently browsers render embedded fonts, let’s compare them side by side:

	Safari 3 Windows	Firefox 3.5 Windows	Explorer 6 Windows
Title of this blog post
Close-up of the title of this blog post
Subheading from this blog post
Close-up of subheading of this blog post
Close-up of main text of this blog post

As you may see, there are some slight differences in the way that fonts are rendered in the various browsers:

• Fonts displayed on Safari for Windows (and all browsers on the Mac) in my opinion look the nicest: they are nicely smoothed out and the text is quite easily read at smaller sizes. This is due to the way Apple products render fonts. Apple has always differed in philosophy with Microsoft on how to render fonts, and this difference is quite obvious when testing pages under the Windows operating system.
• I have found that Internet Explorer does a poor job when displaying fonts converted from OpenType — the glyphs tend to be more jagged and some elements tend to be rendered thinner than they should be. GrauBlau Web, the font used in the headings of  this page, is a converted OpenType font, and you can see this effect in the close-ups above. It does not occur in the main body of the text because Droid Sans is a TrueType font.  There seems to be two reasons for this:
  1. There was information loss when converting GrauBlau Web from OpenType to TrueType.
  2. In Explorer, ClearType renders this font using subpixel anti-aliasing quite more severely than Safari, while other Windows browsers use vanilla anti-aliasing to get the job done. A friend of mine pointed this out, and he said that it’s because ClearType renders TrueType (and, it seems, Embedded Open Type) fonts with subpixel anti-aliasing, but OpenType for some reason isn’t. I don’t know the reasons why, but in this example it looks like it is true – if you look at all of the Explorer closeups,you’ll see the coloured pixels on the edge of all the glyphs, while in Firefox only Droid Sans (which is a TrueType font) has them.
• Firefox only allows you to embed fonts that come from the same server, unless some special headers appear in the HTTP server response. Also, unlike the other browsers, Firefox users first see the page without the embedded font until the font is loaded completely, at which time the fonts suddenly appear on the page. While it can be argued that this is a good thing (the user can read the content immediately without having to rely on the special font), this may not what a web designer would consider desirable.

There are a few more differences, which are better outlined at the Web Fonts Wiki, which seems to keep its information up-to-date.

How to choose which fonts to use

Not having gone to design school, I cannot claim to be an authority on this subject, but I think it is safe to say that when choosing the fonts that you are going to use, it should be in sync with the mood and message you want readers to experience.  Chuck Green’s article, Type palettes, goes into more depth on this subject, and Michael Martin of Smashing Magazine has a great article about Typographic Design Patterns and Best Practices.  Although both of these articles don’t go into font-embedding specifically, they are still relevant reading.

It took me a long time to decide on the fonts I have used here on my blog. When designing the layout, I was going for two things:

1. I wanted the body text to be easy to read
2. I wanted the feeling of the whole blog to be friendly and not look like an academic paper

In the end I decided to use:

1. GrauBlau Web for the headers because it is narrow (which allows more text on a line), easy on the eyes, and since it is used on headers, the user notices it right away and thinks “Hey, this looks different!”.
2. Droid Sans for the main text because it was designed to be easy to read even on low resolutions and, in combination with GrauBlau Web, gave the site a nice, pleasant and friendly look.
3. Droid Sans Mono for the code listings since it was designed to compliment Droid Sans, and, I believe, looks a jillion times better than Courier (which everyone up to now has been forced to use due to a lack of nice looking monospace fonts installed on most computers today).

Again, I didn’t go to design school, but I think for the type of site this is (a blog about web technology), it suits its purpose rather well. I was tempted to choose more ornate fonts, but I didn’t think they suited the content.

Optimizing Font Files

Sometimes you may find that the font files are a little larger than you’d like.  If you open up the font file in FontForge, you may find that a lot of the glyphs inside are not necessary for what you are doing (for example, if your pages are all in English, you might not want all the accented characters that the font contains).  Use FontForge to delete the glyphs you don’t need and regenerate the font – you’ll see that you save quite a few kilobytes, especially in a Unicode font with lots of Japanese and Russian characters included.

Again, because of licensing issues, please ensure that the font license allows you to edit the font in this manner.

Conclusion

What is written here is just the tip of the iceberg.  In the next few years, I expect to be reading several articles on the best way to use embedded fonts, from technical, usability, internationalization and design perspectives. Unfortunately, I also expect to see a lot of MySpace pages looking uglier than ever. Imagine! Now, teenagers around the world can have animated backgrounds, Black Eyed Peas songs playing on load, and have that crazy typewriter font on the main copy.

My God, what have we done ….