Using open source fonts | PracticalSeries: Web Development

9.5 Using the Open source fonts

Before I start this, I need to make an apology:

9.5.1 An apology by the author

I realise now — looking at this with 20/20 hindsight — that I may have committed a faux pas — the typographer’s equivalent of using a pudding spoon to eat soup or cutlery for asparagus.

Gosh. What have you done now? You ask.

Well to make my life easier on the downloadable version of the website where I use open source fonts in place of the Equity ones — all I did was to change the ps-fonts.css file to load the open source font WOFF files in place of the Equity WOFF files. But that is all I changed (just the src: url(...) property), the name I gave the font, eqty-ta-r &c. stayed the same. The font name has to stay the same, it gets used everywhere in style.css.

What this means is that in the downloadable version, everything that is set to font-family: ‘eqty-ta-r’ uses the open source font PT Serif and not Equity. Now it occurs to me that I’m (kind of) calling PT Serif, Equity. I’m not, I’m calling it eqty-ta-r — but we all know that I mean Equity (it’s what the eqty stands for).

So, I’ve probably upset everybody and it was all unintentional; I never gave it a thought when I started (and the fonts were the first thing). If I had I would have given the fonts meaningful names (body-text for example) — but I didn’t, I just didn’t think of it until later and by then it was too late, I was too far down the line.

So I apologise — I apologise to Mr Butterick and to all the people who made the open source fonts — I’m sorry — but I’m sticking with the arrangement. When I do a major revision of all the things I’ve got wrong with the website, this will be right up there with the things I put right first.

9.5.2 Changes to ps-fonts.css

Originally I’d thought about using a completely different CSS file for the open source fonts, but this would have meant changing the HTML on every page to load a different file and that seemed to defeat the purpose of using CSS.

Instead I have two versions of ps-fonts.css. The first is the one with the Equity fonts shown in code 9.6.

The second is the one shown below for the open source fonts.

Before starting on the CSS, we need to put the open source font WOFF files in the woff folder (the open source WOFF files are those listed in table 9.10):

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

This is the same place I put the Equity WOFF files in the online version.

This is what I have in my folder:

Figure 9.20 - Open source WOFF files in the website folder — Figure 9.20 Open source WOFF files in the website folder

Download it here _a.

Now the ps-font.css file:

ps-fonts.css

/* PRACTICALSERIES (c) 2016

**************************************************************************
Title :          WEBSITE FONTS (OPEN SOURCE VERSION)          PS-FONTS.CSS
**************************************************************************

PRACTICALSERIES: Practical Series of Publications
                 by Michael Gledhill
                 Published in the United Kingdom

                 Email: mg@practicalseries.com
                 Web:   www.practicalseries.com
--------------------------------------------------------------------------
DETAILS

1. OPEN SOURCE FONTS
The following file contains a set of open source fonts used to replace the
Equity font set on the downloadable version of this website. The fonts
used and the licences under which they are made available are:

    PT Serif                    Paratype PT Sans Free Font License v1.00
    Source Sans Pro             SIL Open Font License v1.10
    PT Mono                     SIL Open Font License v1.10
    Andada Small Caps           SIL Open Font License v1.10
    Carrois Gothic Small Caps   SIL Open Font License v1.10

The licences for these fonts are reproduced on the Acknowledgements page
of this website.

The fonts are used to replace the Equity fonts as follows:

  Equity                              Open Source
  Font name           Type            Font name          Type
----------------------------------------------------------------------
  Equity A Caps       Regular         Andada SC          Regular
  Equity A Text       Regular         PT Serif           Regular
  Equity A Text       Bold            PT Serif           Bold
  Equity A Text       Italic          PT Serif           Italic
  Equity A Text       Bold & italic   PT Serif           Bold & Italic

  Concourse T2        Regular         Souce Sans Pro     Light

  Concourse T3        Regular         Souce Sans Pro     Regular
  Concourse T3        Bold            Souce Sans Pro     Bold
  Concourse C3 Caps   Regular         Carrois Gothic SC  Regular
  Concourse T3 Index  Regular         PS Index           Regular

  Concourse T4        Regular         Souce Sans Pro     Semibold
  Concourse C4 Caps   Regular         Carrois Gothic SC  Regular

  Triplicate T4c      Regular         PT Mono            Regular

  ps-icons            Regular         No change
----------------------------------------------------------------------

2. PS FONTS
The Concourse index font is replaced with PS Index, a font created for
this website

A small Practical Series font (ps-icons) created from several svg icon
images is also included.

3. NAMING CONVENTIONS
The OS fonts use the same font-family names as the Equity fonts they
replace, the names of the WOFF files are different, both are listed here:

                                                    font-family name
    Font name          Type            WOFF File    (within website)
---------------------------------------------------------------------
    Andada SC          Regular         anda-ca-r      eqty-ca-r
    PT Serif           Regular         pser-ta-r      eqty-ta-r
    PT Serif           Bold            pser-ta-b      eqty-ta-b   
    PT Serif           Italic          pser-ta-i      eqty-ta-i   
    PT Serif           Bold & Italic   pser-ta-bi     eqty-ta-bi

    Souce Sans Pro     Light           ssan-t2-r      conc-t2-r

    Souce Sans Pro     Regular         ssan-t3-r      conc-t3-r
    Concourse T3       Bold            ssan-t3-b      conc-t3-b
    Carrois Gothic SC  Regular         carr-c3-r      conc-c3-r
    PS Index           Regular         ps-index       conc-i3-r

    Souce Sans Pro     Semibold        ssan-t4-r      conc-t4-r
    Carrois Gothic SC  Regular         carr-c4-r      conc-c4-r

    PT Mono            Regular         pmon-t4-r      trip-t4-r

    ps-icons           Regular         ps-icons       icon-ps-r
------------------------------------------------------------------------*/


/* ***********************************************************************
   Serif fonts
   ******************************************************************** */

@font-face {                    /* Serif Small Caps - regular*/
    font-family: 'eqty-ca-r';
    src: url(woff/carr-ca-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Serif text - regular */
    font-family: 'eqty-ta-r';
    src: url(woff/pser-ta-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Serif text - bold */
    font-family: 'eqty-ta-b';
    src: url(woff/pser-ta-b.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Serif text - italic */
    font-family: 'eqty-ta-i';
    src: url(woff/pser-ta-i.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Serif text - bold & italic */
    font-family: 'eqty-ta-bi';
    src: url(woff/pser-ta-bi.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ***********************************************************************
   Sans-serif fonts
   ******************************************************************** */

/* Sans-serif T2 ------------------------------------------------------ */
@font-face {                    /* San-serif T2 - regular */
    font-family: 'conc-t2-r';
    src: url(woff/ssan-t2-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* San-serif T3 ------------------------------------------------------- */
@font-face {                    /* San-serif T3 - regular */
    font-family: 'conc-t3-r';
    src: url(woff/ssan-t3-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* San-serif T3 - bold */
    font-family: 'conc-t3-b';
    src: url(woff/ssan-t3-b.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* San-serif T3 Index - regular */
    font-family: 'conc-i3-r';
    src: url(woff/ps-index.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* San-serif C3 Small caps - regular */
    font-family: 'conc-c3-r';
    src: url(woff/carr-c3-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* San-serif T4 ------------------------------------------------------- */
@font-face {                    /* San-serif T4 - regular */
    font-family: 'conc-t4-r';
    src: url(woff/ssan-t4-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* San-serif C4 Small caps - regular */
    font-family: 'conc-c4-r';
    src: url(woff/carr-c3-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ***********************************************************************
   Monotype fonts
   ******************************************************************** */

/* Monotype T4c ------------------------------------------------------- */
@font-face {                    /* Monotype T4c - regular */
    font-family: 'trip-t4-r';
    src: url(woff/pmon-t4-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ***********************************************************************
   PS icon fonts
   ******************************************************************** */

@font-face {                    /* PS Icons - regular */
    font-family: 'icon-ps-r';
    src: url(woff/ps-icons.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

Code 9.7 Final ps-fonts.css for the open source fonts

a

Let’s look at what I’ve done here; we’ll take the eqty-ta-r font family as an example. The original @font-face code (with the Equity font) was:

@font-face {                    /* Equity A text - regular */
    font-family: 'eqty-ta-r';
    src: url(woff/eqty-ta-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;

And the open source version is:

@font-face {                    /* Serif text - regular */
    font-family: 'eqty-ta-r';
    src: url(woff/pser-ta-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

Apart from the comments, the only thing that has changed is I’ve loaded a different WOFF file woff/pser-ta-r.woff not woff/eqty-ta-r.woff; everything else stays exactly the same. The effect of this is that when I select the eqty-ta-r font-family in style.css (for body text &c.), I’m now using the open source font PT Serif instead of Equity.

No changes are required to style.css, the font name stays the same — it’s just linked to a different WOFF file^†1.

And that’s it; I do the same for each @font-face rule in ps-fonts.css.

The two fonts that I’ve made, PS Icons and PS Index, I discuss briefly in the next section.


†1		It’s not strictly speaking true that there are no changes to style.css; the open source fonts need a bit of tweaking when they’re used, I change the font size, letter spacing and line spacing; however, I make these changes in a separate section at the end of style.css