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

Download the source

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.