How to use a WOFF file | PracticalSeries: Web Development

9.3 How to use a WOFF file

This is actually pretty easy—we’re going to use another of those funny @ things—in this case:

@font-face { ... }

Reminds me of the boat naming debacle in England^†1 recently, should be called Fonty-McFontface, read Mr Quinten Letts’s (somewhat vitriolic) article about it here.

This takes a specified WOFF file and gives it a name that can then be used within CSS using the font-family property.

The @font-face is a CSS rule, and to use it, it needs to go in a CSS file.

This is where I break one of my own rules—I’m going to write the CSS file, but I’m going to put it under the 21-global directory (rather than the 11-resources directory)—the only reason I have for doing this, is that it keeps all the font files together. The same is true of the ps-icons font; this is one I created, but I’ve still kept it together with the other WOFF files—sometimes you just have to be practical about things.

I’m going to create a new CSS file that loads each of the WOFF files and gives each one a specific name that can then be used in the style.css file. The names I give each font will be the same as the WOFF file names (i.e. the FFFF-TN-SS structure used in Table 9.2, but without the WOFF extension).

This is just my naming convention; it’s perfectly possible to call the fonts anything you like (font names can even have spaces in them).

Again I’m sticking to my convention of only using lowercase characters [a-z], numbers [0-9] and the hyphen (dash) [-].

There is a great deal of repetition in this, so I’ll go through the first font in detail; the rest are just more of the same.

First things, the new CSS file—using Brackets, create a new file in the folder:

21-global\03-fonts

This is just like we did before with the grid.css file (§ 8.3). This is one directory up from where the WOFF files are:

21-global\03-fonts\woff

Rename the file ps-fonts.css.

Ok, I’ve broken another rule here; this is a CSS file and it’s going in the font directory (not the CSS directory)—again this is just a practicality and for the same reason, it just keeps all the font stuff in the same place.


†1		England or Britain? — English or British? I’m English I’m afraid — actually (like God) I’m a Yorkshire man. It took the Scottish to make me English (I was happy being British until I met the Jocks). As P. G. Wodehouse said “It has never been hard to tell the difference between a Scotsman with a grievance and a ray of sunshine”. I take this attitude largely to annoy my wife, Jane, she’s from Edinburgh — a professional Scotswoman living in England (where the sun always shines).

9.3.1 Loading a font with @font-face

The first font will be the Equity A regular font and its associated WOFF file (eqty-ta-r.woff). To create it add the following to the new file:

ps-fonts.css

@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;
}

Code 9.1 First font

Ok, the @font-face rule. The first thing inside the @font-face rule is the name that is being given to the font. This is done with the font-family property:

    font-family: 'eqty-ta-r';

I’m going to call this font eqty-ta-r. It could be called anything you like, but I’m sticking with the same name as the WOFF file (I’ll come to regret this later, see § 9.5.1).

The name is surrounded in single quotes—there is some debate about this, it is not always necessary (it depends if you want to start the name with digits or some punctuation character or a keyword). In our case, it’s not necessary; however, it seems to be good practice to use the single quotes—it leaves no doubt about the name—so I always use single quotes in the font-family property unless I’m specifying one of the standard fonts such as serif.

The src (source) property:

    src: url(woff/eqty-ta-r.woff) format('woff');

Has the link to the WOFF file: url(woff/eqty-ta-r.woff), this is the path from the directory containing ps-fonts.css to the WOFF file. It also specifies the format of the font file: format('woff'). The format is needed because @font-face supports several different formats (§ 9.1.2). In our case it is always WOFF.

And that is basically it; that is sufficient to load a font and give it a name.

The other two lines:

    font-weight: normal;
    font-style: normal;

Define some basic properties for the font. The first, font-weight sets the weight of the font (how dark it is), normal is the default option. In our case, the Equity fonts have their weight set within each WOFF file (Concourse T4 is darker than Concourse T3); so normal is the correct option for us. The values for this property are:

Normal
Bold
Bolder
Lighter
A numeric value (100, 200, 300, 400, 500, 600, 700, 800, 900)

The value bold is equivalent to the numeric value 700; normal is equivalent to a numeric value of 400.

Lighter moves the font one font weight lighter (decreases the numerical value by 100). Similarly, bolder makes the font one font weight darker (increases the numerical value by 100).

For this property to work, the font must have multiple weights built in to it that match those values, the Equity fonts don’t; so this property has no effect on the appearance of the font. However, it is good practice to include the property (just in case the font is adapted at some future date).

The final property font-style sets the style of the font, this can be:

Normal
Italic
Oblique

Again, the font must have these styles embedded if this property is to work, ours don’t (we have different WOFF files for each style); so again we just set this property to normal.

9.3.2 Using the font

Well the first thing we have to do is link to the ps-font.css file within index.html.

index.html currently holds the responsive column example setup in Section 8.3. We can use this to demonstrate the new fonts. It currently looks like this:

index.html

<!DOCTYPE html>                             <!-- HTML 5 file -->

<!-- PRACTICALSERIES (c) 2016

************************************************************

PRACTICALSERIES: Practical Series of Publications
                 Website Development for Online Publications

************************************************************ -->

<html lang="en">      <!-- Declare language -->
    <head>            <!-- Start of head section -->
        <!-- Unicode characters (must be in first 1024 char) -->
        <meta charset="utf-8">           
        <!-- Make page follow browser width and reset zoom -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ========================================================


<!-- ********************************************************
     HEAD CSS LOAD
     ******************************************************** -->
<link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css">
<link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css">
<link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">

        <title>PracticalSeries: Web Development</title>
    </head>

    <body>
        <div class="rg-row">               <!-- ROW CONTAINER -->
            <!-- LEFT  COLUMN -->
            <div class="rg-col rg-span1-5" style="background-color: #c57">
                Col L
            </div>
            <!-- MIDDLE COLUMN -->
            <div class="rg-col rg-span3-5" style="background-color: #7c5">
                Col M
            </div>
            <!-- RIGHT COLUMN -->
            <div class="rg-col rg-span1-5" style="background-color: #57c">
                Col R
            </div>
        </div>
    </body>
</html>

Code 9.2 Current index.html

Let’s change it a bit:

First let’s link to the font file ps-fonts.css.

index.html

<!-- ********************************************************
     HEAD CSS LOAD
     ******************************************************** -->
<link rel="stylesheet" type="text/css" href="21-global/03-fonts/ps-fonts.css">
<link rel="stylesheet" type="text/css" href="21-global/01-css/normalise.css">
<link rel="stylesheet" type="text/css" href="11-resources/01-css/grid.css">
<link rel="stylesheet" type="text/css" href="11-resources/01-css/style.css">

        <title>PracticalSeries: Web Development</title>
    </head>

Code 9.3 Link to font file

I’ve added the link to ps-fonts.css as the first style sheet. Pretty much everything uses fonts, so this is the best place for it.

Now let’s add some text so we can see what’s happening, I’ve added some Lorem Ipsum to the central columns area (I’ve also taken out the inline styles that changed the background colour of the column areas):

index.html

    <body>
        <div class="rg-row">               <!-- ROW CONTAINER -->
            <!-- LEFT  COLUMN -->
            <div class="rg-col rg-span1-5">
                Col L
            </div>
            <!-- MIDDLE COLUMN -->
            <div class="rg-col rg-span3-5">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate
            </div>
            <!-- RIGHT COLUMN -->
            <div class="rg-col rg-span1-5">
                Col R
            </div>
        </div>
    </body>
</html>

Code 9.4 Remove background colour and add text

View this in live preview and it looks like Figure 9.10. This is exactly the same as we had at the end of § 8.3 (apart from there being text in the middle and there is no colouring); the font is just the same, it is still the default serif font: Times New Roman.

Figure 9.10 - Default serif text (Times New Roman)

This is to be expected; although we have loaded the font; we haven’t used it anywhere—we haven’t applied it to anything yet.

So let’s do that now; if you remember we set the default html selector font style to serif, we did this as one of the changes we made to the normailse.css file (§ 7.2.1).

Now let’s override that by changing the html selector in style.css to use our new font:

style.css

html {
    background-color: #fbfaf6;             /* cream page bkgrd */
    font-size: 24px;
    color: #404030;
    font-family: 'eqty-ta-r';
    text-rendering: optimizeLegibility;
}

Code 9.5 Link to font file

Adding the font-family to the html selector:

    font-family: 'eqty-ta-r';

changes the font for everything (because it’s in the html selector) to Equity. It looks like Figure 9.11:

Hard to tell, but it is different—you can immediately see the new font is darker; the other differences are more subtle. I’ve enlarged them and put them side by side here (Times on the left, Equity on the right)

Figure 9.11 - Default serif text (Times New Roman)

The most obvious difference is the shape of the descender on the ‘g’. The serifs in Times tend to be more sharply pointed (top of the ‘d’), the bottom serifs on the ‘A’ are more bar like in Equity (tapered in Times) and the bar at the top of the ‘t’ is thicker in Equity.

So we’ve loaded a new font and used it—woohoo.

Now we just need to add all the other fonts to ps-fonts.css. These are identical in principal, only the names change.

This is the full file:

ps-fonts.css

/* PRACTICALSERIES (c) 2016

**************************************************************************
Title :          WEBSITE FONTS                                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. EQUITY, CONCOURSE AND TRIPLICATE FONTS
The following file contains a subset of the Equity, Concourse and
Triplicate fonts developed by Matthew Butterick. These fonts were
purchased under a single licence.

Under the terms of that licence, the fonts may be used on up to three
domains owned by this organisation. This is the second of those sites.

The fonts were converted to WOFFs with the Font Squirrel font generator:
    https://www.fontsquirrel.com/tools/webfont-generator
under Mr. Buttericks instructions.

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

3. NAMING CONVENTIONS
The following fonts have been converted to webfonts and are loaded by
this file:
                                        Shorthand name
    Font name           Type           (within website)
---------------------------------------------------------------------
    Equity A Caps       Regular         eqty-ca-r
    Equity A Text       Regular         eqty-ta-r
    Equity A Text       Bold            eqty-ta-b   
    Equity A Text       Italic          eqty-ta-i   
    Equity A Text       Bold & italic   eqty-ta-bi

    Concourse T2        Regular         conc-t2-r

    Concourse T3        Regular         conc-t3-r
    Concourse T3        Bold            conc-t3-b
    Concourse C3 Caps   Regular         conc-c3-r
    Concourse T3 Index  Regular         conc-i3-r

    Concourse T4        Regular         conc-t4-r
    Concourse C4 Caps   Regular         conc-c4-r

    Triplicate T4c      Regular         trip-t4-r

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


/* ***********************************************************************
   Equity fonts
   ******************************************************************** */

@font-face {                    /* Equity A SmallCaps - regular*/
    font-family: 'eqty-ca-r';
    src: url(woff/eqty-ca-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@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;
}
@font-face {                    /* Equity A text - bold */
    font-family: 'eqty-ta-b';
    src: url(woff/eqty-ta-b.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Equity A text - italic */
    font-family: 'eqty-ta-i';
    src: url(woff/eqty-ta-i.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Equity A text - bold & italic */
    font-family: 'eqty-ta-bi';
    src: url(woff/eqty-ta-bi.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ***********************************************************************
   Concourse fonts
   ******************************************************************** */

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

/* Concourse T3 ------------------------------------------------------- */
@font-face {                    /* Concourse T3 - regular */
    font-family: 'conc-t3-r';
    src: url(woff/conc-t3-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Concourse T3 - bold */
    font-family: 'conc-t3-b';
    src: url(woff/conc-t3-b.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Concourse T3 Index - regular */
    font-family: 'conc-i3-r';
    src: url(woff/conc-i3-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Concourse C3 Smallcaps - regular */
    font-family: 'conc-c3-r';
    src: url(woff/conc-c3-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Concourse T4 ------------------------------------------------------- */
@font-face {                    /* Concourse T4 - regular */
    font-family: 'conc-t4-r';
    src: url(woff/conc-t4-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {                    /* Concourse C4 Smallcaps - regular */
    font-family: 'conc-c4-r';
    src: url(woff/conc-c4-r.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

/* ***********************************************************************
   Triplicate fonts
   ******************************************************************** */

/* Triplicate T4c ----------------------------------------------------- */
@font-face {                    /* Triplicate T4c - regular */
    font-family: 'trip-t4-r';
    src: url(woff/trip-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.6 Final ps-fonts.css for the Equity fonts

There’s quite a lot of code here, but it is basically 14 lots of the same @font-face rule, all that changes is the WOFF file name and the font-family font name each time.

There is one @font-face rule for each of the WOFF files; and each rule gives us a named font that we can use in the style.css file. The way I’ve arranged it with the Equity fonts, the font name always matches the WOFF file name—again this is just my convention.

I’ve also added proper comments to the start of the file.