Using Custom Fonts on Your Web Site

by steve on May 10, 2013

Let’s say you’re bored to tears with the fonts that are available to your web browser, and you don’t want to, or can’t use a service like WebInk. What are your options?

Here’s a good article that covers the issue.

So, you’ve decided to add your font in via CSS and @font-face. Excellent choice! The next problem is how to convert your font file into all the different font files that are required to cover all the browsers you may encounter? There’s some free web services out there, but if you’re font file is too big, they will reject you.

User Agent Man has written a command-line script that will convert your fonts for you. Click here to go to his site and read about it.

This script should work in Windows, Mac and Linux. The catch? It’s not simple to install. It requires quite a few other things in order to run. Here’s some additional hints on how to install this software in OSX.

Installing fontforge. To do this you’ll need to first have Apple’s Xcode developer tools and MacPorts.
1. Xcode: This is available for OSX going way back. These instructions are for 10.8, which is what I have. It may be different for older versions.
  1. If you have a install DVD, Xcode may be on that. Otherwise you can download it from the Apple App Store. Just search for “Xcode”. It’s free.
  2. Launch Xcode, accept the license.
  3. Go Xcode -> preferences -> downloads -> components
  4. Click the button and install the Command Line Tools
  5. Yay! Now you can compile programs from the command line. You’ll be doing that later.
2. MacPorts. This allows simple installation of unix programs on your mac. It’s easy to install, go here and follow the instructions: http://www.macports.org/
3. Ok, now you can install fontforge with this command:
  1. sudo port install fontforge
  2. enter your password when prompted, then wait until it’s done.
If you don’t already have it, install Java. Instructions here.
Install a piece of Java software called Batik.
1. Instructions start here
2. The available places to download the software are here
3. The file you want will be called “batik-1.7.zip” (at least until there’s a new version)
4. You’re supposed to verify the integrity of the batik install files, but if you’re walking through these instructions you probably won’t bother. However, do note that skipping the verify is a potential security issue for your computer.
5. Copy batik-1.7.zip to where you’d like it to live that’s convenient to your command line.
6. Open a terminal window, move to that directory and give this command:
  1. jar xvf batik-1.7.zip
  2. NOTE: you must use “jar” to unzip this. Other utilities won’t set the preferences correctly.
7. Ok, that’s done and ready
Use macports to add ttf2eot. In your terminal give this command:
1. sudo port install ttf2eot
Install sfnt2woff
1. Download the software from here: http://people.mozilla.com/~jkew/woff/
2. Make sure you’ve saved it as a file.
3. We need to copy it somewhere where it will run properly. There’s all kinds of places it could go, I just decided to put it here with this command:
  1. sudo cp sfnt2woff /usr/sbin/sfnt2woff
4. Now make it executable:
  1. sudo chmod +x sfnt2woff
5. Yay! Almost done!
Download the CSS3 Font Converter from here.
1. Unzip the files, place them in a directory you like
2. Make the script executable:
  1. sudo chmod +x convertFonts.sh
3. Edit the script and set this:
  1. BATIK_DIR=’c:\Program Files\Batik\batik-1.7′
4. To wherever you’ve put the batik software
If you’ve done all that correctly then you’re ready to convert fonts!

Now what you do is move your truetype fonts into the directory with the font converter script and run this command:

./convertFonts.sh *.ttf

The script converts the .ttf files to the additional formats you need and also creates a CSS stylesheet!

Thanks to User Agent Man for this handy tool. Remember, you can read more here!

How to make the font show up in your web site

You’ll notice that in addition to the font files the script has produced a file called “stylesheet.css”. That file will contain text that looks something like this:

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

You need to place this in your site’s CSS somewhere. The URL is the location of the font files relative to where the css file is. That is, if:

The css file you added that @font-face to is at /user/foobar/site/css
AND the font files are in /user/foobar/site/css/fonts
THEN you want to edit those URL lines to read like so:
- ```
url('fonts/NanumPenScript.woff')
```

Ok, now you need to tell which elements of your web site to use the font. There’s a million ways to do this. In my case, I wanted to use the font in the menu. My menu has a CSS ID of “#menu-main-menu”, so I entered this into my CSS:

#menu-main-menu { font-family: 'NanumPen',Helvetica,sans-serif; }

This tells the menu to use my custom font “NanumPen”, and if that’s not available use Helvetica, or whatever sans-serif the browser has.

Hopefully this post helps you take control of your web site. Let us know how it goes!

UPDATE:

The tool generates the CSS for you, but I found that the custom font did not work in IE8. After some research I’ve found that this CSS will allow the fonts to work back to IE8:

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

Using Custom Fonts on Your Web Site

How to make the font show up in your web site

And now, the latest news:

Blog Categories: