9Fonts & web fonts

I’m going to demon­strate this with the Eq­uity 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 Eq­uity fonts, the process I de­scribe here works for any font. If you al­ready have the WOFF files for the font then you can skip this part.

WOFF — web open font for­mat files are how we get a font onto a web­site — it is this file that the browser ren­ders as a font. WOFF files are ba­si­cally stan­dard Open­Type font files that have un­der­gone a com­pres­sion process to make them smaller.

So how do we get our WOFF file? — Well we start with a basic Open­Type font file — this is how I con­verted the Eq­uity fonts and this ex­pla­na­tion ba­si­cally fol­lows the in­struc­tions I re­ceived when I bought the fonts — but the prin­ci­pal is the same for any font.

Table 9.1 lists the main font files that came with the Eq­uity font set (there are a lot more than these), Eq­uity and Con­course have sim­i­lar sets but with tab­u­lar fig­ures^†1. Trip­li­cate has vari­ants for stan­dard text, code, short form char­ac­ters and pro­por­tional spac­ing (so that would be a pro­por­tional, non-pro­por­tional font — go fig­ure). They also all come as Open­Type TT (with .ttf ex­ten­sions) and Open­Type CFF (with .otf ex­ten­sions). 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 (de­spite what I said in § 9.1.1 — I said al­ways use Open­Type CFF files) I’m going to use the Open­Type TT files (with the .ttf ex­ten­sion), this is be­cause Mr But­t­er­ick op­ti­mised these fonts for web use when he cre­ated them and rec­om­mends that these be con­verted to WOFF files (this is pe­cu­liar to the Eq­uity fonts).

So I’m con­vert­ing the .ttf files only, this brings the total num­ber of files down to 126.

Of the rest, I’m only using a sub­set on the web­site; 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:

Mr But­t­er­ick was kind enough to let me have a copy when I en­quired about them — I like them and I’m very grate­ful to Mr But­t­er­ick for al­low­ing me to use them.

So we’ve got the font files, how do we con­vert them? Well we use an on­line font con­verter; there are lots of these, but the one I’m rec­om­mend­ing is font squir­rel. font squirrel seems to be well re­spected (Mr But­t­er­ick rec­om­mends it too), it has more con­ver­sion op­tions than other sites and it also has a pol­icy of not con­vert­ing fonts that the de­sign­ers have re­quested not be con­verted.

For ex­am­ple if I were to try and con­vert the Cal­isto MT font from my PC (by up­load­ing its .ttf file) I would be told that “the de­signer had re­quested that their font not be con­verted” and the con­ver­sion would not take place.

Other font con­ver­sion sites are not so con­sci­en­tious.

• 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 Fig­ure 9.1.

Click the ex­pert but­ton (wow, we’re ex­perts now) to get the full list of op­tions, Fig­ure 9.2:

Now be­fore you do any­thing else (even be­fore you up­load the fonts) change the em square value under ad­vanced op­tions to 1000, high­lighted in Fig­ure 9.3.

The rea­son for doing this now is that it might not let you do it later on when we’ve changed some of the other op­tions. The Eq­uity fonts were de­signed with an Em Square of 1000 so it im­por­tant that this set­ting is right.

Next we up­load the fonts, I did this in three parts, one for Eq­uity, one for Con­course and one for Trip­li­cate (only be­cause it takes longer the more fonts you add) — the process is iden­ti­cal for each. I’ll go through Eq­uity in de­tail:

Click the up­load fonts but­ton and in the pop-up di­a­logue box nav­i­gate to where you keep the font files on your ma­chine. In my case it looks like Fig­ure 9.4.

Se­lect the font files you want and click open.

There will be a lot of or­ange bar twirling — the more files, the more twirling.

Even­tu­ally it will pre­sent you with a list of up­loaded fonts:

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

Click the down­load your kit but­ton — sounds rude.

I con­verted the Con­course and Trip­li­cate fonts in ex­actly the same way, with ex­actly the same set­tings.

Ex­tract the down­loaded files to some­where on your ma­chine and have a look at them. This is what my Eq­uity zip file had in it:

If you open any of the HTML files, you will get an ex­am­ple web page show­ing the font in ques­tion.

The files we want are the WOFF files, there are five of these for Eq­uity; this is be­cause I up­loaded five fonts and each font gets its own WOFF file.

These are the WOFF files we want to use on the web­site. The only thing is the file names — they’re a bit long. I de­cide to re­name the files. I used the fol­low­ing con­ven­tion, each WOFF file is named:

FFFF-TN-SS

FFFF is a four let­ter ab­bre­vi­a­tion of the font name

• eqty — Eq­uity

• conc — Con­course

• trip — Trip­li­cate

The T refers to the type, this can be:

• t — Nor­mal text

• c — Small caps

• i — Index

N refers to the weight of the font, for Eq­uity this is a or b (I only use a), for Con­course and Trip­li­cate it is a num­ber 2, 3, or 4 (the higher the num­ber the heav­ier, darker, the font).

Fi­nally SS, refers to the style, this can have the fol­low­ing val­ues:

• r  — Reg­u­lar

• b  — Bold

• i  — Italic

• bi — Bold and italic

I re­named all the con­verted files as fol­lows:

	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 web­site folder struc­ture.

There is al­ready a folder for them (I’ve shown the path in red in Fig­ure 9.8):

The path to the folder is:

/1001-web­site/21-global/03-fonts/woff

The rea­son these fonts are in the 21-global path is that the WOFF files are third party files (I may have con­verted them to WOFF files, but I did not cre­ate the orig­i­nal font files, some­one else did so they’re third party files).

Fig­ure 9.9 shows all the con­verted WOFF lines in the cor­rect di­rec­tory.

• 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 no­ticed that there is an ad­di­tional WOFF file called ps-icons.woff. This is a font file that I cre­ated; it has the icons used in the nav­i­ga­tion bar at the top of each page. I ex­plain all about it in sec­tion § 9.6. For the time being, it’s just an­other 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.