9

9Fonts & web fonts

9.2

Converting a font to a WOFF file

I’m going to demonstrate this with the Equity fonts — you may not want to use these on your site, and that’s fine — if you’re using open source fonts I cover this in § 9.4. Whilst I’m using the Equity fonts, the process I describe here works for any font. If you already have the WOFF files for the font then you can skip this part.

WOFF — web open font format files are how we get a font onto a website — it is this file that the browser renders as a font. WOFF files are basically standard OpenType font files that have undergone a compression process to make them smaller.

So how do we get our WOFF file? — Well we start with a basic OpenType font file — this is how I converted the Equity fonts and this explanation basically follows the instructions I received when I bought the fonts — but the principal is the same for any font.

Table 9.1 lists the main font files that came with the Equity font set (there are a lot more than these), Equity and Concourse have similar sets but with tabular figures†1. Triplicate has variants for standard text, code, short form characters and proportional spacing (so that would be a proportional, non-proportional font — go figure). They also all come as OpenType TT (with .ttf extensions) and OpenType CFF (with .otf extensions). In total there are 252 font files.

†1 Tabular figures use non-proportional spacing for numbers (the numbers all have a fixed width) and this makes them stack better when used in a table of numbers.

Now (despite what I said in § 9.1.1 — I said always use OpenType CFF files) I’m going to use the OpenType TT files (with the .ttf extension), this is because Mr Butterick optimised these fonts for web use when he created them and recommends that these be converted to WOFF files (this is peculiar to the Equity fonts).

So I’m converting the .ttf files only, this brings the total number of files down to 126.

Of the rest, I’m only using a subset on the website; I’ve shown the ones I’m using in blue in Table 9.1. There are 13 in all.

Equity Concourse Triplicate (code)
Equity Text A Regular Concourse Text 2 Regular Triplicate Text 3 Regular
Equity Text A Bold Concourse Text 2 Bold Triplicate Text 3 Bold
Equity Text A Italic Concourse Text 2 Italic Triplicate Text 3 Italic
Equity Text A Bold Italic Concourse Text 2 Bold Italic Triplicate Text 3 Bold Italic
Equity Caps A Regular Concourse Text 3 Regular Triplicate Text 4 Regular
Equity Caps A Bold Concourse Text 3 Bold Triplicate Text 4 Bold
Equity Text B Regular Concourse Text 3 Italic Triplicate Text 4 Italic
Equity Text B Bold Concourse Text 3 Bold Italic Triplicate Text 4 Bold Italic
Equity Text B Italic Concourse Text 4 Regular Triplicate Caps 4 Regular
Equity Text B Bold Italic Concourse Text 4 Bold Triplicate Caps 4 Bold
Equity Caps B Regular Concourse Text 4 Italic Triplicate Caps 4 Italic
Equity Caps B Bold Concourse Text 4 Bold Italic Triplicate Caps 4 Bold Italic
Concourse Text 6 Regular
Concourse Text 6 Italic
Concourse Text 7 Regular
Concourse Text 7 Italic
Concourse Text 8 Regular
Concourse Text 8 Italic
Concourse Caps 2 Regular
Concourse Caps 2 Bold
Concourse Caps 3 Regular
Concourse Caps 3 Bold
Concourse Caps 4 Regular
Concourse Caps 4 Bold
Concourse Caps 6 Regular
Concourse Caps 7 Regular
Concourse Caps 8 Regular
Concourse Index 3 Regular
Table 9.1   The Equity font set
  • The last Concourse font in the list (Concourse Index 3) does not come with the Equity font set; it provides index numbers with a circular surround, like this:
Concourse Index

Mr Butterick was kind enough to let me have a copy when I enquired about them — I like them and I’m very grateful to Mr Butterick for allowing me to use them.

So we’ve got the font files, how do we convert them? Well we use an online font converter; there are lots of these, but the one I’m recommending is font squirrel. font squirrel seems to be well respected (Mr Butterick recommends it too), it has more conversion options than other sites and it also has a policy of not converting fonts that the designers have requested not be converted.

For example if I were to try and convert the Calisto MT font from my PC (by uploading its .ttf file) I would be told that “the designer had requested that their font not be converted” and the conversion would not take place.

Other font conversion sites are not so conscientious.

  • Fonts have copyrights; you can only convert those that you have permission to use on a website. Usually, those are the ones that you have bought for the purpose or those that are freely available for use, like open source fonts.

Ok, open the font squirrel generator page, it looks like Figure 9.1.

Figure 9.1 - Font Squirrel web font generator
Figure 9.1   Font Squirrel web font generator

Click the expert button (wow, we’re experts now) to get the full list of options, Figure 9.2:

Figure 9.2 - Font Squirrel web font generator — Experts page
Figure 9.2   Font Squirrel web font generator — Experts page

Now before you do anything else (even before you upload the fonts) change the em square value under advanced options to 1000, highlighted in Figure 9.3.

Figure 9.3 - Em Square Value
Figure 9.3   Em Square Value

The reason for doing this now is that it might not let you do it later on when we’ve changed some of the other options. The Equity fonts were designed with an Em Square of 1000 so it important that this setting is right.

Next we upload the fonts, I did this in three parts, one for Equity, one for Concourse and one for Triplicate (only because it takes longer the more fonts you add) — the process is identical for each. I’ll go through Equity in detail:

Click the upload fonts button Upload button and in the pop-up dialogue box navigate to where you keep the font files on your machine. In my case it looks like Figure 9.4.

Figure 9.4 - Upload fonts dialogue box
Figure 9.4   Upload fonts dialogue box

Select the font files you want and click open.

There will be a lot of orange bar twirling — the more files, the more twirling.

Eventually it will present you with a list of uploaded fonts:

Figure 9.5 - Uploaded fonts
Figure 9.5   Uploaded fonts

The next step is to set all the other options we need, the final set looks like this:

Figure 9.6 - Final settings
Figure 9.6   Final settings

Click the download your kit button — sounds rude.

I converted the Concourse and Triplicate fonts in exactly the same way, with exactly the same settings.

Extract the downloaded files to somewhere on your machine and have a look at them. This is what my Equity zip file had in it:

Figure 9.7 - Downloaded WOFF files
Figure 9.7   Downloaded WOFF files

If you open any of the HTML files, you will get an example web page showing the font in question.

The files we want are the WOFF files, there are five of these for Equity; this is because I uploaded five fonts and each font gets its own WOFF file.

These are the WOFF files we want to use on the website. The only thing is the file names — they’re a bit long. I decide to rename the files. I used the following convention, each WOFF file is named:

FFFF-TN-SS

FFFF is a four letter abbreviation of the font name

  • eqty — Equity

  • conc — Concourse

  • trip — Triplicate

The T refers to the type, this can be:

  • t — Normal text

  • c — Small caps

  • i — Index

N refers to the weight of the font, for Equity this is a or b (I only use a), for Concourse and Triplicate it is a number 2, 3, or 4 (the higher the number the heavier, darker, the font).

Finally SS, refers to the style, this can have the following values:

  •  — Regular

  •  — Bold

  •  — Italic

  • bi — Bold and italic

I renamed all the converted files as follows:

Original woff file Renamed woff file
equity_text_a_regular-webfont eqty-ta-r.woff
equity_text_a_bold-webfont eqty-ta-b.woff
equity_text_a_italic-webfont eqty-ta-i.woff
equity_text_a_bold_italic-webfont eqty-ta-bi.woff
equity_caps_a_regular-webfont eqty-ca-r.woff
concourse_t2_regular-webfont conc-t2-r.woff
concourse_t3_regular-webfont conc-t3-r.woff
concourse_t3_bold-webfont conc-t3-b.woff
concourse_t4_regular-webfont conc-t4-r.woff
concourse_c3_regular-webfont conc-c3-r.woff
concourse_c4_regular-webfont conc-c4-r.woff
concourse_index3_regular-webfont conc-i3-r.woff
triplicate_t4_code_regular-webfont trip-t4-r.woff
Table 9.2   Renamed Equity font set WOFF files

The next thing is where to put them in the website folder structure.

There is already a folder for them (I’ve shown the path in red in Figure 9.8):

Figure 9.8 - WOFF file storage location
Figure 9.8   WOFF file storage location

The path to the folder is:

/1001-website/21-global/03-fonts/woff

The reason these fonts are in the 21-global path is that the WOFF files are third party files (I may have converted them to WOFF files, but I did not create the original font files, someone else did so they’re third party files).

Figure 9.9 shows all the converted WOFF lines in the correct directory.

Figure 9.9 - All the WOFF files
Figure 9.9   All the WOFF files
  • The little green ticks on each folder in the directory tree are there only because I’m synchronising the folders with local folders on my machine (a running backup as it were) — for the purpose of all this, just ignore them.

The sharp eyed amongst you will have noticed that there is an additional WOFF file called ps-icons.woff. This is a font file that I created; it has the icons used in the navigation bar at the top of each page. I explain all about it in section § 9.6. For the time being, it’s just another WOFF file we can use; get it here a.

OK, we’ve got all the WOFF files, so how do we use them? That’s the next bit.



End flourish image