Making any font faster on websites; or preventing over-dependence on Typekit

By | December 25, 2013

Have you ever had a font you wished to use on a website, but found that it wasn’t on google fonts or Typekit? Then, this article should help you out a bit.

So, first things first: lets learn a bit about what we are going to be doing. We will be taking TrueType or OpenType fonts and converting them into the WOFF file format. WOFF is a compressed font file with some additional metadata.

WOFF files are in use by google fonts and Typekit, and is the standard and defined way to send fonts across the world wide web.

So lets get cracking!

We are going to use a handy conversion tool made by jkew over at mozilla. So lets get that first. You will need a C compiler, and preferably the make program (although not required).

On ubuntu you can simply execute:

sudo apt-get install build-essential

If you are running apple products, try the apple developer tools.

So lets get the code; here are two links:
source | icosadev mirror

Extract this into a directory, cd into it, then run make

If all went well you will now have two programs: sfnt2woff & woff2sfnt. We will only be using the sfnt2woff today.

So sfnt2woff is dead simple to use. Just pass a font file (TTF or OTF) to it, and it will output a WOFF file.

So lets copy a few fonts into our programs folder first, then run it. I decided to convert Raleway font family, but you can use whatever ones you want. Note that the path to fonts may be different on your machine, and also that multiple fonts is not necessary.

cp /usr/share/fonts/truetype/raleway/Raleway-Thin.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Bold.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-ExtraLight.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Light.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Regular.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-ExtraBold.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Heavy.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-Medium.ttf .
cp /usr/share/fonts/truetype/raleway/Raleway-SemiBold.ttf .

And convert them:

./sfnt2woff Raleway-Thin.ttf
./sfnt2woff Raleway-Bold.ttf
./sfnt2woff Raleway-ExtraLight.ttf
./sfnt2woff Raleway-Light.ttf
./sfnt2woff Raleway-Regular.ttf
./sfnt2woff Raleway-ExtraBold.ttf
./sfnt2woff Raleway-Heavy.ttf
./sfnt2woff Raleway-Medium.ttf
./sfnt2woff Raleway-SemiBold.ttf

After this is done, we will have nine WOFF files:

Raleway-Thin.woff
Raleway-Bold.woff
Raleway-ExtraLight.woff
Raleway-Light.woff
Raleway-Regular.woff
Raleway-ExtraBold.woff
Raleway-Heavy.woff
Raleway-Medium.woff
Raleway-SemiBold.woff

Great, we are halfway there.

At this point, you would move these files into a /css/fonts directory somewhere on your website.

That aside, lets do the styling to actually be able to use our font. We are going to be using the @font-face rule. Let’s do the regular one first.

So why did we add font-weight? Well, when we do use Raleway on a website we want to make sure we are referencing the right one, and not just any. You can also use things like font-style to differentiate between italic versions and normal versions. So, I’ve sorted the 8 files by their weight- then I reference them. Here is the full code:

It looks like a lot, but really it is just minor tweaks of the same few lines.

Raleway Thin (download woff) adds approximately 18KB of data; you should always make sure to only include the fonts you are going to use- and to strip out any others to reduce loading times.

Here is a demo:

Raleway Thin

Further reading: