Tutorial - Reducing the file size of custom web fonts
Level: Beginner – Intermediate
If you’ve got a keen eye, or read tech news, you’ll have noticed that Twitter recently ditched Helvetica Neue in favour of Gotham.
Update (01/10/14): On 3rd September Twitter made a U-turn on that decision and have reverted back to Helvetica Neue, citing ‘speed and readability’.
Update 14/01/15: Further reading: How we use web fonts responsibly, or, avoiding a @font-face-palm, by Filament Group
Looks pretty nice in my opinion.
In recent times we’ve seen a huge rise in the number of custom fonts used on the web. Why? Because it makes the web look awesome. They’re here to stay.
If a web developer uses a custom font and the user doesn’t have the font installed on their operating system, then they’ll need to download the web font file(s) along with the rest of the website.
For example, Twitter includes Gotham in three different weights (light, book & medium). Twitter decided embed the fonts as base64 encoded strings in a CSS file.
These weigh in at a total of 154KB, which isn’t ideal, but it’s small enough to be loaded on most internet connections. What about when you need to use a font which weighs in much heavier?
Most fonts that are used for large bodies of text are usually quite small in file size, but sometimes designers (especially print designers who aren’t used to performance or responsive design) include fonts that can be over 500KB. These fancy fonts tend to be used on headings to give some extra impact. However, when you’re sitting waiting for a font to load on a train when you just want to read the page content, downloading a 500KB+ font can be quite frustrating.
Tip: Negotiate
It’s always worth negotiating with your designer as sometimes they’ll be happy for you to use a smaller, alternative font. However, in my experience they’re usually quite particular and want the site to look a certain way so don’t push them!
One way of speeding up your page loads with large fonts is to load the fonts after you’ve loaded the content. Chris Coyier @chriscoyier wrote a great tutorial on this.
What I’ll be focusing on is reducing the file size of the font itself. Now before we go any further, it’s worth getting your head around the following definitions:
Definitions
| TERM | DEFINITION | EXAMPLE |
|---|---|---|
| Glyph | A glyph is one particular shape | ‘£’, ‘M’, or ‘t’ |
| Ligature | A ligature is a character that has been joined together by two or more glyphs | ‘Æ’, ‘fi’, ‘&’ |
| Character | A character is one part of a font. The letter ‘A’ and ‘a’ are the same character, in different cases. | ‘A’ and ‘a’ are the same character. |
| Character Set | A character set is a subset of characters inside a font | ISO-8859-1 (Western Europe) |
| Font | A font is a set of characters for a typeface at one particular size. is a particular member of a typeface, such as roman, bold or italic. | Helvetica Neue Bold Condensed |
| Typeface | A typeface (or ‘font family‘) is a group of slightly different fonts from the same family. | Helvetica Neue |
‘Fun’ fact: you may have spotted the ampersand as an example of a ligature. The ampersand is indeed a ligature; it’s a combination of the letters ‘Et’ in latin, meaning ‘and’.
What am I making?
In this tutorial we’re going to be reducing the file size of a freeware font (freeware means it can be used on commercial or non-commercial works for free) called Boycott. Boycott weighs in at 175KB as a .ttf font for desktop use.
We’ll do this by:
- Reducing the number of glyphs in the font
- Deciding which browsers we want to support (and which files we don’t need)
- Experimenting with Cufón to reduce the complexity of the remaining glyphs
Reducing the number of glyphs in the font
For a free collection of open source fonts you can use a font delivery service such as Google Fonts (there are others too).
Google Fonts provides a nice, simple bit of code to add to your <head> in order to start using open source fonts:
<link href='//fonts.googleapis.com/css?family=Alegreya+Sans:400,500,700' rel='stylesheet' type='text/css'>
Whilst Google Fonts appears to be loading a CSS file, it’s actually loading a script to detect the browser, then it intelligently serves up a CSS file referencing the compatible format. In my case (Google Chrome on Mac) it serves up three 16kb .woff files, which comes to just 48kb in total.
For further reductions you can specify exactly which characters you’ll be needing. I won’t cover this too much as it’s well documented elsewhere, but this is worth a read:
http://googlewebfonts.blogspot.co.uk/2011/04/streamline-your-web-font-requests.html
For fonts that aren’t available through a font delivery service, you’ll need to reduce the character set yourself.
One of my colleagues, Lawrence, introduced me to a fantastic Mac OS application called Glyphs.
By importing an Open Type (.otf) or True Type (.ttf) font into Glyphs, you can immediately see the character set.
Now the file that you first open will be locked so that you can’t edit it. Choose File > Duplicate or use the Shift+Cmd+S keyboard shortcut, which will duplicate the font. You can now play around with this font as you like.
By clicking on certain glyphs (hold Cmd to select multiple) you can highlight which glyphs you’d like to remove from the font.
Tip: I usually expand all the categories & languages in the left side pane so that I can better appreciate where each glyph fits into which part of the font.
Once you have selected all the glyphs that you would like to remove, press Cmd+Backspace. You will be prompted to check whether you’re sure, and then they’re gone.
Now do a File > Export, and you’ll be faced with the following dialog box:
I’ve experienced problems if I keep ‘Autohint unhinted glyphs’ on, so you may want to avoid that. Once you’re happy you can click ‘Next…’ to begin the export. Check your Export Destination for the new .otf file and check the file size. Hopefully it’ll be much reduced from your original .otf or .ttf file.
For the Boycott font used in the tutorial I managed to reduce it from 175KB to 91KB, a 48% saving, which is great!
Deciding which browsers we want to support (and which files we don’t need)
Okay, so now we’ve reduced the number of glyphs in our font we have a much smaller .otf file to deal with. Unfortunately browsers don’t support .otf files, so we’re going to have to convert it into formats that browsers do support.
Which browsers support which filetypes?
Well, if you’ve worked in the web industry for a while it’ll be no surprise to you that to support all browsers you’ll need no less than four different formats.
You can probably get away with only using .eot and .ttf as .eot is supported by IE 6 through to IE 11 and .ttf pretty much covers the rest. The .ttf format, as you can imagine, is quite easily pirated from your servers and used as a desktop font, however.
Note: if you use fontsquirrel.com (mentioned further on) to generate your web fonts, there’s a ‘WebOnly™’ option which prevents your .ttf web font files from being used on desktop.
.woff was created to prevent font piracy and is now the preferred format, which is great except for the fact versions of IE, Safari, iOS Safari & Android released in the not too distant past aren’t supported.
| TYPE | DESCRIPTION | COMPATIBILITY | DETAILS |
|---|---|---|---|
| TTF | True Type Font | TTF on caniuse.com | Wikipedia |
| SVG | Scalable Vector Graphic | SVG on caniuse.com | Wikipedia |
| EOT | Embeddable Open Type | EOT on caniuse.com | Wikipedia |
| WOFF | Web Open Font Format | WOFF on caniuse.com | Wikipedia |
In the end it’s up to you which browsers you want your web fonts to be compatible with.
Converting .otf to web font formats
If you’re using a subscription based service, such as Fonts.com, they allow you to self-host your fonts & provide an option to download the web font.
Alternatively, you can run your .otf or .ttf through fontsquirrel.com, which is a great service. Font Squirrel offers this service in good faith, so please honour the End User Licensing Agreements (EULAs) of your fonts. These often stipulate that you must include specific credit to the font author, and possibly some tracking code.
- Use the ‘Add Fonts’ button at the top to select your .otf file.
- Choose which font formats (browsers) you would like to support
- You may want to add ‘WebOnly™’ protection against piracy
- There’s no need for subsetting as you already did this in Glyphs
- You may want to base64 encode your web fonts (like Twitter!) to reduce the number of HTTP requests your page has to make
- Check your fonts are licensed and legally eligible for web embedding, tick the agreement
- Download your kit
Once converted to a web font, our Boycott font (with a reduced number of glyphs) clocks in at 656KB
Hold on a minute, that’s 565KB (721%) larger than before!? Well, yes, but that’s that’s because we’ve now got four different file formats rather than one, and some aren’t as well compressed as others.
The .woff file is barely any bigger, whilst the .svg & .ttf become pretty expensive at 346KB and 160KB.
Also, if we run our original .ttf file (before reducing the number of glyphs) through font squirrel we’ll see it come out at 686KB.
Okay, so we’ve only saved ourselves 30KB here, but that’s because Boycott didn’t actually contain its own glyphs for a lot of the characters. You’ll notice these glyphs weren’t grungy looking like the rest, and were greyed out. This 30KB saving represents the glyphs we removed that had been given the grungy feel.
Removing unnecessary glyphs from fonts with a more expansive character set will see you make much larger savings, such as with Veneer (down to 2MB from 5MB).
Experimenting with Cufón to reduce the complexity of the remaining glyphs
I’m not going to go into the advantages and disadvantages of Cufón as it’s covered elsewhere but if you believe Cufón could be viable option, then you may be able to get more savings.
Note: using Cufón will likely degrade the quality of your font, which many EULAs forbid. Please ensure you have permission to use Cufón before reading any further.
Cufón uses a font generator tool and JavaScript to create a custom font renderer in canvas and VML.
There is a really nice Cufón generator website. Much like Font Squirrel, this website gives you configuration options.
Select your font and check ‘All’ under ‘Include the following glyphs.’ Remember we already reduced the number of glyphs using the Glyphs app.
This area is where you can start tweaking. The higher the units per em, the better the quality. I’d advise you to keep lowering the quality until it’s at a stage where you’re happy with both the quality and the file size.
I used the same 91KB ‘reduced glyphs’ .otf file I used to generate the 656KB @font-face files and managed to generate a JavaScript Cufon file at just 277KB. Bear in mind you also need to include the 18KB cufon-yui.js file, but that’s not much of a sacrifice.
You’ll notice in the demo that the fonts are ever so slightly different, but if you can deal with that, and the fact it’s Cufon, then it could be the difference between being able to use a fancy font and not!
You can (and should) also achieve extra savings by gzipping your fonts.
Update 14/01/15: Further reading: How we use web fonts responsibly, or, avoiding a @font-face-palm, by Filament Group
Interested in working at Parallax?
We have a front-end developer position open at the moment