9Fonts & web fonts

I ex­plained in § 1.3 that I’m not dis­trib­ut­ing the Eq­uity fonts with the down­load­able ver­sion of the this web­site (mainly be­cause I don’t think I’m al­lowed to under the terms of my font li­cence). I’m re­plac­ing them with open source fonts.

Open source fonts are es­sen­tially fonts that are free to use and dis­trib­ute (and in some cases even mod­ify). The fonts I’ve cho­sen are also free for com­mer­cial use (I’m not even sure this is a com­mer­cial web­site — I cer­tainly haven’t made any money from it).

google fonts seems to be what every­one thinks of when men­tion­ing open source fonts; but it isn’t the only source. Some of the fonts I’m using are avail­able on Google fonts, but not all. I ac­tu­ally down­loaded them from font squirrel (the same site I used to con­vert the Eq­uity fonts to web fonts), this does have all the font I need.

I’m using the fol­low­ing fonts in place of the listed Eq­uity fonts:

They look like this:

You’re prob­a­bly won­der­ing why I picked these fonts. The an­swer is that they’re the best I could find. They’re ok, but I did have to do a bit of tweak­ing with point size, let­ter spac­ing and line spac­ing to get them to look any­where near de­cent.

The PT Serif font (the main body text) is, in its nat­ural state, a bit big. I re­duced the font-size by 10% (0.1 rem) on the web­site (iron­i­cally, this gets it nearer to the Ger­st­ner grid point size). I also re­duced the line spac­ing to match the Eq­uity line spac­ing — sur­pris­ingly these changes greatly im­prove the ap­pear­ance.

The open source small caps fonts (An­dada and Car­rois) are def­i­nitely the weak points, and I don’t like hav­ing that many dif­fer­ent fonts in one place; how­ever, small caps open source fonts are few and far be­tween and these are the best avail­able^†1.

†1		I like the idea of open source fonts, the problem is they’re not really good enough — I don’t mean that from an appearance point of view, I mean it from a completeness point of view. It’s possible to find decent open source fonts, but they have restrictions: they only come in one weight, they don’t have all the styles (bold italic &c.) they don’t have a full set of features (small caps &c.).
		I’m thinking about making my own set of fonts and then I don’t have to worry about it — how hard can it be? Watch this space — I’ll let you know how I get on. One thing is for sure, I won’t be using FontForge.

Well this is easy; I’ve al­ready said I got them from Font Squir­rel. I think most of them are avail­able from Google fonts; how­ever, I’m rec­om­mend­ing Font Squir­rel be­cause all the fonts I want are avail­able there and they’re pretty easy to down­load.

I’ll take you through it. Let’s start with the main body text PT Serif.

Go to the Font Squir­rel web­site and type the font name (PT Serif) into the search box:

Now click where it says PT Serif AaB­bCc... to open the font ex­am­ple page (Fig­ure 9.15)

There are a cou­ple of things here, the first is the type of li­cence, the row of icons (I’ve high­lighted them in or­ange) under PT SERIF is a basic in­di­ca­tion of where you can use the font:

	symbol	meaning
		Commercial Desktop Use — Create commercial graphics and documents
		@font-face Embedding — Embed the font in your websites with CSS
		E-books and PDFs — Embed font in eBooks and portable documents
		Applications — Embed font in applications and software
	Table 9.4   Font Squirrel licencing icons

We want to use it with @font-face em­bed­ding in the web­site; so the sec­ond one (let’s call it the world) is the one for us.

• The li­cenc­ing sym­bols don’t give the full story; it’s best to check the ac­tual li­cence it­self (click the Li­cence but­ton). All the open source fonts here, with the ex­cep­tion of PT Serif are avail­able under the SIL Open Font Li­cense v1.10.

  PT Serif has its own li­cence (Paratype PT Sans Free Font Li­cense v1.00).

  Both li­cences allow the fonts to be freely used pretty much any­where — the fonts can even be mod­i­fied. There are re­stric­tions: you can’t sell the fonts in their own right, use the au­thor’s name to en­dorse your prod­ucts &c. But for our pur­poses we can use the fonts on the web­site, and from my point of view I’m al­lowed to re­dis­trib­ute them — ok, so I’m not going to hell yet (well, maybe for other stuff, but not for this).

Now the main font page (Fig­ure 9.15) has a big down­load but­ton to down­load ttf ver­sions of the font. Ide­ally we want WOFF and for the PT Serif font this is easy (less so for the oth­ers) click the web­font kit but­ton (high­lighted). This gives the web­font kit page Fig­ure 9.16:

Guess what’s next. The de­fault op­tions are ok; I only want WOFF files, the sub­set West­ern Latin also seems to be ok. So hit the down­load @font-face kit but­ton (high­lighted). This will de­liver a file called pt-serif-font­facekit.zip.

If you unzip the file you will have a folder called web fonts; within this are six sub­fold­ers, one for each of the six font styles. If you look in any of these fold­ers you will find a WOFF file, these are the files we need (but we only need four of them, don’t bother with the pt­ser­if­cap­tion fold­ers)

The files needed are:

	original file	renamed file	font and style
	PTF55F-webfont.woff	pser-ta-r.woff	PT Serif — regular
	PTF75F-webfont.woff	pser-ta-b.woff	PT Serif — bold
	PTF56F-webfont.woff	pser-ta-i.woff	PT Serif — italic
	PTF76F-webfont.woff	pser-ta-bi.woff	PT Serif — bold, italic
	Table 9.5   PT Serif font files and renamed files

Again I’ve re­named the fonts fol­low­ing my con­ven­tion (§ 9.2).

And that’s it, these are the Eq­uity re­place­ments.

The re­main­ing fonts are all under the SIL Open Font Li­cence and these are a bit dif­fer­ent to the PT Serif font. Let’s take the next main font (the re­place­ment for Con­course) Source Sans Pro.

The process start off in the same way, type Source Sans Pro into the Font Squir­rel search box and you will get Fig­ure 9.17:

This time if you look on the web­font kit page, you will find that, due to some awk­ward nam­ing re­quire­ment, the web fonts are not avail­able; how­ever, it does say we can make our own using the same Font Squir­rel font gen­er­a­tor we used in § 9.2 — the process is ex­actly the same too.

In this case we will down­load the OTF ver­sion of the font (some of the re­main­ing fonts are OTF, some are TTF — just de­pends on the font). To do this click the down­load otf but­ton. Again this will pro­duce a zip file, this time called source-sans-pro.zip; this will con­tain sev­eral files, we only need four:

	original file	renamed file	font and style
	SourceSansPro-Light.otf	ssan-t2-r.otf	Source San Pro — light
	SourceSansPro-Regular.otf	ssan-t3-r.otf	Source San Pro — regular
	SourceSansPro-Bold.otf	ssan-t3-b.otf	Source San Pro — bold
	SourceSansPro-Semibold.otf	ssan-t4-r.otf	Source San Pro — semi-bold
	Table 9.6   Source San Pro files and renamed files

Again I’ve re­named the four files (as shown). Copy these files to a work­ing di­rec­tory.

Next thing is to con­vert the OTF files to WOFF files using the font gen­er­a­tor.

Click the gen­er­a­tor but­ton on the Font Squir­rel page. Up­load the four font files in ex­actly the same way we did for the Eq­uity fonts (§ 9.2). Use ex­actly the same op­tions (Figure 9.6). It should all look like Fig­ure 9.18.

Once the fonts are up­loaded (they will show the font names rather than the file names), press the down­load your kit but­ton to again get a zip file of the con­verted fonts (again, just like § 9.2).

• This conversion took about 9 minutes for some reason.

This again gives a zip file (web­fontkit-20...​zip), ex­tract it and this has the WOFF files we need, this time they pretty much have the name we want, just edit the WOFF file name and take­out –web­font this will give the names spec­i­fied below:

	renamed file	font and style
	ssan-t2-r.otf	Source San Pro — light
	ssan-t3-r.otf	Source San Pro — regular
	ssan-t3-b.otf	Source San Pro — bold
	ssan-t4-r.otf	Source San Pro — semi-bold
	Table 9.7   Source San Pro files WOFF files

We’re going to re­peat this process for the re­main­ing fonts (these have to be down­loaded as TTF and OTF files and con­verted to WOFF files just like Source San Pro).

Using Font Squir­rel in a re­peat of the Source San Pro pro­ce­dure, down­load the fonts Car­rois Gothic, An­dada and PT Mono.

Re­name the fol­low­ing files ac­cord­ing to Table 9.8:

	original file	renamed file	font and style
	AndadaSC-Regular.otf	anda-ca-r.otf	Andada — small caps, regular
	CarroisGothicSC-Regular.ttf	carr-c3-r.ttf	Carrois Gothic — small caps
	PTM55FT.ttf	pmon-t4-r.ttf	PT Mono — regular
	Table 9.8   Remaining font files and renamed files

An­dada is an OTF file and this is con­verted in ex­actly the same way as Source San Pro, use ex­actly the same op­tions in the Font Gen­er­a­tor.

The Car­rois and PT Mono are TTF fonts, when con­vert­ing these font to WOFF files, the em square value in ad­vanced op­tions should be set to 2048 (TTF fonts use an em square of 2048 units, OTF font use one of 1000 units).

Con­vert the fonts and you should have a com­plete set that we can use to re­place the eq­uity fonts. The com­plete set of WOFF files you should have is:

	renamed file	font and style
	pser-ta-r.woff	PT Serif — regular
	pser-ta-b.woff	PT Serif — bold
	pser-ta-i.woff	PT Serif — italic
	pser-ta-bi.woff	PT Serif — bold, italic
	ssan-t2-r.woff	Source San Pro — light
	ssan-t3-r.woff	Source San Pro — regular
	ssan-t3-b.woff	Source San Pro — bold
	ssan-t4-r.woff	Source San Pro — semi-bold
	carr-c3-r.woff	Carrois Gothic — small caps
	anda-ca-r.woff	Andada — small caps, regular
	pmon-t4-r.woff	PT Mono — regular
	Table 9.9   Open source WOFF files

Table 9.3 broadly lists the Eq­uity fonts and the open source fonts used to re­place them in the down­load­able ver­sion of the web­site; here I list each spe­cific Eq­uity WOFF file and the open source WOFF file used to re­place it.

	equity woff file	replacement open source file
	eqty-ta-r.woff	pser-ta-r.woff
	eqty-ta-b.woff	pser-ta-b.woff
	eqty-ta-i.woff	pser-ta-i.woff
	eqty-ta-bi.woff	pser-ta-bi.woff
	eqty-ca-r.woff	anda-ca-r.woff

	concourse woff file	replacement open source file
	conc-t2-r.woff	ssan-t2-r.woff
	conc-t3-r.woff	ssan-t3-r.woff
	conc-t3-b.woff	ssan-t3-b.woff
	conc-t4-r.woff	ssan-t4-r.woff
	conc-c3-r.woff	carr-c3-r.woff
	conc-c4-r.woff	carr-c3-r.woff
	conc-i3-r.woff	ps-index.woff

	triplicate woff file	replacement open source file
	trip-t4-r.woff	pmon-t4-r.woff
	Table 9.10   Equity WOFF files and replacement open source WOFF files

There is one WOFF file listed there that you haven’t got yet ps-index, this is one I made. It re­places the Con­course Index font. It looks like this, Fig­ure 9.19.

Well, it’s not bril­liant and it has some re­stric­tions, but it works (after a fash­ion) and I couldn’t re­ally find a suit­able open source font^†2. Hence PS Index.

You can down­load the ps-index.woff file here _a.

†2		There are some, but they tend to map the numbers to odd keys on the keyboard (QWERTY) for example. Now at the time (I know better now); I didn’t know how to remap the characters and associated keys — so I came up with my own.

After all that I’ve said in the pre­vi­ous sec­tions, I’m going to sug­gest that you use the down­load­able ver­sion of Source Sans Pro on the web­site (rather than get­ting it from Font Squir­rel), the rea­son is I’ve mod­i­fied it — just a lit­tle bit — It’s the old say­ing, a lit­tle knowl­edge is a dan­ger­ous thing. I know how to mod­ify a font now, and the temp­ta­tion to fix things that weren’t bro­ken in the first place is com­pelling^†3. This is what I’ve done; I change how the Source Sans Pro num­ber 1 looks, it looked like this:

After I’d mod­i­fied it, it looked like this:

I took the bot­tom bar off — I thought it looked nicer — I think I’m al­lowed to mod­ify the font under the li­cence — hope so.

Down­load the full set of open source WOFF files here _a

†3		There is an old engineering adage: “If it’s not necessary to mend it, it’s necessary not to mend it”. Or as they say more colloquially in America, “If it ain’t broke, don’t fix it”.