9Fonts & web fonts


Open source fonts

I explained in § 1.3.2 that I’m not distributing the Equity fonts with the downloadable version of the this website (mainly because I don’t think I’m allowed to under the terms of my font licence). I’m replacing them with open source fonts.

Open source fonts are essentially fonts that are free to use and distribute (and in some cases even modify). The fonts I’ve chosen are also free for commercial use (I’m not even sure this is a commercial website—I certainly haven’t made any money from it).

google fonts seems to be what everyone thinks of when mentioning open source fonts; but it isn’t the only source. Some of the fonts I’m using are available on Google fonts, but not all. I actually downloaded them from font squirrel (the same site I used to convert the Equity fonts to web fonts), this does have all the font I need.

I’m using the following fonts in place of the listed Equity fonts:

Table 9.3 - Open source replacements for the equity fonts

Table 9.3   Open source replacements for the equity fonts

They look like this:

Figure 9.13 - Equity fonts with replacement open source fonts

Figure 9.13   Equity fonts with replacement open source fonts

You’re probably wondering why I picked these fonts. The answer is that they’re the best I could find. They’re ok, but I did have to do a bit of tweaking with point size, letter spacing and line spacing to get them to look anywhere near decent.

The PT Serif font (the main body text) is, in its natural state, a bit big. I reduced the font-size by 10% (0.1 rem) on the website (ironically, this gets it nearer to the Gerstner grid point size). I also reduced the line spacing to match the Equity line spacing—surprisingly these changes greatly improve the appearance.

The open source small caps fonts (Andada and Carrois) are definitely the weak points, and I don’t like having that many different fonts in one place; however, small caps open source fonts are few and far between and these are the best available†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.


Where to get open source fonts?

Well this is easy; I’ve already said I got them from Font Squirrel. I think most of them are available from Google fonts; however, I’m recommending Font Squirrel because all the fonts I want are available there and they’re pretty easy to download.

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

Go to the Font Squirrel website and type the font name (PT Serif) into the search box:

Figure 9.14 - Font Squirrel search

Figure 9.14   Font Squirrel search

Now click where it says PT Serif AaBbCc... to open the font example page (Figure 9.15)

Figure 9.15 - Font Squirrel search

Figure 9.15   PT Serif page

There are a couple of things here, the first is the type of licence, the row of icons (I’ve highlighted them in orange) under PT SERIF is a basic indication of where you can use the font:

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

We want to use if with @font-face embedding in the website; so the second one (let’s call it the world) is the one for us.

  • The licencing symbols don’t give the full story; it’s best to check the actual licence itself (click the Licence button). All the open source fonts here, with the exception of PT Serif are available under the SIL Open Font License v1.10.

    PT Serif has its own licence (Paratype PT Sans Free Font License v1.00).

    Both licences allow the fonts to be freely used pretty much anywhere—the fonts can even be modified. There are restrictions: you can’t sell the fonts in their own right, use the author’s name to endorse your products &c. But for our purposes we can use the fonts on the website, and from my point of view I’m allowed to redistribute them—ok, so I’m not going to hell yet (well, maybe for other stuff, but not for this).

Now the main font page (Figure 9.15) has a big download button to download ttf versions of the font. Ideally we want WOFF and for the PT Serif font this is easy (less so for the others) click the webfont kit button (highlighted). This gives the webfont kit page Figure 9.16:

Figure 9.16 - Font Squirrel search

Figure 9.16   PT Serif webfont download

Guess what’s next. The default options are ok; I only want WOFF files, the subset Western Latin also seems to be ok. So hit the download @font-face kit button (highlighted). This will deliver a file called pt-serif-fontfacekit.zip.

If you unzip the file you will have a folder called web fonts; within this are six subfolders, one for each of the six font styles. If you look in any of these folders you will find a WOFF file, these are the files we need (but we only need four of them, don’t bother with the ptserifcaption folders)

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 renamed the fonts following my convention (§ 9.2).

And that’s it, these are the Equity replacements.

The remaining fonts are all under the SIL Open Font Licence and these are a bit different to the PT Serif font. Let’s take the next main font (the replacement for Concourse) Source Sans Pro.

The process start off in the same way, type Source Sans Pro into the Font Squirrel search box and you will get Figure 9.17:

Figure 9.17 - Source Sans Pro page

Figure 9.17   Source Sans Pro page

This time if you look on the webfont kit page, you will find that, due to some awkward naming requirement, the web fonts are not available; however, it does say we can make our own using the same Font Squirrel font generator we used in § 9.2—the process is exactly the same too.

In this case we will download the OTF version of the font (some of the remaining fonts are OTF, some are TTF—just depends on the font). To do this click the download otf button. Again this will produce a zip file, this time called source-sans-pro.zip; this will contain several 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 renamed the four files (as shown). Copy these files to a working directory.

Next thing is to convert the OTF files to WOFF files using the font generator.

Click the generator button on the Font Squirrel page. Upload the four font files in exactly the same way we did for the Equity fonts (§ 9.2). Use exactly the same options (Figure 9.6). It should all look like Figure 9.18.

Once the fonts are uploaded (they will show the font names rather than the file names), press the download your kit button to again get a zip file of the converted fonts (again, just like § 9.2).

Figure 9.18 - Source Sans Pro conversion to WOFF

Figure 9.18   Source Sans Pro conversion to WOFF

  • This conversion took about 9 minutes for some reason.

This again gives a zip file (webfontkit-20...zip), extract 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 takeout –webfont this will give the names specified 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 repeat this process for the remaining fonts (these have to be downloaded as TTF and OTF files and converted to WOFF files just like Source San Pro).

Using Font Squirrel in a repeat of the Source San Pro procedure, download the fonts Carrois Gothic, Andada and PT Mono.

Rename the following files according 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

Andada is an OTF file and this is converted in exactly the same way as Source San Pro, use exactly the same options in the Font Generator.

The Carrois and PT Mono are TTF fonts, when converting these font to WOFF files, the em square value in advanced options should be set to 2048 (TTF fonts use an em square of 2048 units, OTF font use one of 1000 units).

Convert the fonts and you should have a complete set that we can use to replace the equity fonts. The complete 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


Replacing the Equity fonts with open source fonts

Table 9.3 broadly lists the Equity fonts and the open source fonts used to replace them in the downloadable version of the website; here I list each specific Equity WOFF file and the open source WOFF file used to replace 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 replaces the Concourse Index font. It looks like this, Figure 9.19.

Figure 9.19 - A comparison of Concourse Index and PS Index

Figure 9.19   A comparison of Concourse Index and PS Index

Well, it’s not brilliant and it has some restrictions, but it works (after a fashion) and I couldn’t really find a suitable open source font†2. Hence PS Index.

You can download 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.


A small confession

After all that I’ve said in the previous sections, I’m going to suggest that you use the downloadable version of Source Sans Pro on the website (rather than getting it from Font Squirrel), the reason is I’ve modified it—just a little bit—It’s the old saying, a little knowledge is a dangerous thing. I know how to modify a font now, and the temptation to fix things that weren’t broken in the first place is compelling†3. This is what I’ve done; I change how the Source Sans Pro number 1 looks, it looked like this:

After I’d modified it, it looked like this:

I took the bottom bar off—I thought it looked nicer—I think I’m allowed to modify the font under the licence—hope so.

Download 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”.

End flourish image