Reading: We strongly suggest you read chapter 8 of Head First HTML and CSS with these notes.

Traditional Fonts

One of the most important aspect of a page that can be controlled with CSS is the font. A font is a collection of pictures of letters. A letter is some kind of Platonic ideal, like perfect circles or archetypal chairs. It's also a unit of information. Any particular letter is drawn by some person. Some are simple block letters, others are works of art (like medieval illuminated manuscripts). A font is a collection of these pictures, one for each character in the character set.

Fonts are studied in the field of typography, and their study is outside the scope of this course. If you are interested in their history and technique you should take the ART 222: Introductory Print Methods course offered by the Book Arts program.

For many years, fonts in web pages were restricted by the fonts that came already pre-installed in a computer. This didn't allow for a lot of variety in styling. This changed with CSS3 and the introduction of web fonts, which don't need to be installed in one's computer. Furthermore, with the use of the Google Fonts API it is very easy to incorporate such fonts in a website, as we will demonstrate in these notes.

Read the suggested chapter 8 in Head First HTML and CSS for a more detailed account on styling fonts. In the following, we give a very concise summary.

Font Properties

There are systematic ways in which fonts can be characterized:

Examples

In the following we show two examples of using different font families for the elements <p> and <em>. Notice how the text changes when the second rule is added.

Example 1

code to show font styling result of applying font styling
Applying a font to the element <p>.

Example 2

code to show font styling

result of applying font styling

Adding a font for the element <em>.

Google Fonts API

The easiest way to incorporate fancy fonts in your pages is to use the free service provided by Google Fonts API. API stands for Application Programming Interface. With this method, you only need to perform a few simple steps:

You're done. Google takes care of providing all needed format files, you don't have to provide such formats as part of your website.

Here is an example of the code you need to write to create the shadowed header below:

The <link> line goes into the HTML file:

  <head>
    ...
    <link href='http://fonts.googleapis.com/css?family=Wallpoet' rel='stylesheet' >
 </head>

The font-family style goes in the CSS file (inside the rule for the desired element):

  h2 {
      font-family: 'Wallpoet', cursive;
      font-size: 200%;
      color: black;
      text-shadow: 4px 4px 4px gray;
}

This header uses Wallpoet from Google Fonts

The font was created by Lars Berggren.


Putting fonts into your CSS File

The previous code works fine, but if you have a dozen pages in your site, and you want to use Wallpoet in all of them, every one of those pages would have to have the link tag in the head. That is a lot of redundancy and is contrary to our goal of stating the CSS information once in the shared external CSS file.

What we can do instead is, in the Google Fonts browser, instead of using the default link code, switch to the @import tab.

In that tab, you'll find code like this (it's the same URL as in the link):

@import url(https://fonts.googleapis.com/css?family=Wallpoet);

Copy/paste that into your shared CSS file, and you'll be able to use Wallpoet in any file that uses that CSS file.

Google Fonts can break HTML Validation

When you use several Google Fonts for a page, the URL generated by Google contains the operator | to separate the different fonts. HTML doesn't like such special characters, thus, your page will not deemed valid by the W3 validator. To fix this issue, you should replace the character | with %7C.

Optional Reading

Beyond here is optional reading for the interested student. The material is well within your abilities, and you're encouraged to read it, but it is not required.

Web Fonts

As we mentioned, with traditional fonts that come pre-installed in our machines, we have only a limited number of choices (since the fonts need to be installed in the machine of the viewers of the page too, not only your own). However, with web fonts (supported by all modern browsers) there are new ways to deliver fonts (either by having your files as part of your website, or by linking to other web servers) so that everyone can see the pages with the font we intended.

Be aware that not all fonts on the Web are free. For some of them you need to pay. Thus, it is better to start your search with one of the services that aggregate fonts that are free for use. Such a website is Font Squirrel, from which you can download the fonts you like. Suppose after browsing the available fonts, you decided to use the handdrawn font Desyrel.

screenshot from Font Squirrel site
A screenshot from the FontSquirrel website showing the page for the Desyrel font.

Clicking on the Download TTF button, you can get the file with the font (after unzipping), desyrel.ttf. Then, you can create a subfolder fonts in the folder where your HTML and CSS files are stored and then use this font as shown below:

@font-face {
       font-family: desyrel;
       src: url("fonts-files/desyrel.ttf") format("truetype");
       font-weight: normal;
       font-style: normal;
}

p {
       font-family: desyrel, cursive;
       font-size: xx-large;
}
                

This sentence was written with the Desyrel font, downloaded from FontSquirrel.


Unfortunately, things are not so simple. Because there are so many browsers and platforms, to make sure that all of them will display the desired font, we will need to provide the font in many different formats (Chapter 8 in your book explains these formats). Thus, the rule for @font-face will look a bit more complicated. The good news is that this code and all the files can be automatically created for you by Font Squirrel, using its menu for WebFont Generator, after you upload the file desyrel.tff (or some other font). Here is how the automatically generated CSS will look like:

@font-face {
    font-family: 'desyrelregular';
    src: url('desyrel-webfont.eot');
    src: url('desyrel-webfont.eot?#iefix') format('embedded-opentype'),
         url('desyrel-webfont.woff') format('woff'),
         url('desyrel-webfont.ttf') format('truetype'),
         url('desyrel-webfont.svg#desyrelregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
            

Notice that the files are referred directly, and you might need to add the relative path to the folder you'll be storing these files.

If this looks like a lot of work, there is an easier way, that doesn't involve having to keep the font files on our own server, we explain this method in the next section.

Choosing a method

We showed here three different ways of styling fonts and that can be confusing at first. Here are some tips for you to decide what to use:

Keep in mind that your choice must be informed by the needs of the website you're building. Is the font important to convey something particular about the nature of the website? If the answer is yes, then you should make all the efforts to learn the advanced techniques we described.