Fonts and Web Fonts

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:

  • Font-families: serif, sans-serif, monospace, etc. Serifs are the little marks at the end of the strokes of a letter. Along the baseline, they are horizontal, and can help guide your eye along the line. Some fonts have them, some don't. ("sans" is French for "without.") Times is a serif font; Arial is sans-serif.
  • Font names: Verdana, Arial and Geneva are all sans-serif fonts, yet they look different: they are different fonts. Each font is the creative product of some artist or foundry.
  • Style: some fonts are upright or normal, others are slanted with a little extra curliness that we call italic. Some font artists define several styles for their font families.
  • Size: fonts might be 10 point, 12 point, or many other font sizes. (A point is 1/72nd of an inch.) Some fonts simply scale the "design size," so, for example, 12 point is simply 20 percent larger than 10 point. Other fonts modify the scaling for artistic beauty. You can also use seven abstract "absolute" sizes (they specify elements of a table of font sizes kept by the browser) named:
    • xx-small
    • x-small
    • small
    • medium
    • large
    • x-large
    • xx-large

    You can also use abstract relative sizes named larger and smaller, that are relative to the surrounding font.

  • Weight: The designer may produce variant fonts with thicker or thinner lines. Fonts with thicker lines are often called bold.

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

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.

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:

  • Find fonts that you like from the list of Google Fonts , and click the button Add to Collection.
  • On the bottom part of the browser, in the Collection tab, click on the button Use and verify your choices.
  • Copy the provided <link> code from Step 3 to your HTML file (it goes in the <head> section).
  • Add the CSS code from Step 4 to the CSS rules you want.

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.

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:

  • If the website you are building is simple and you feel overwhelmed by the choices we provided, stay with traditional fonts.
  • If you want a more sophisticated look for your website (maybe for a book or music band), get familiar with how to use Google Fonts API.
  • If your website needs a particular kind of font that Google dosn't provide, learn how to incorporate Web Fonts by using the services provided by the FontSquirrel website. Chapter 8 of your book is required reading in this case.

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.

© Wellesley College Computer Science Staff. This work is licensed under a Creative Commons License. Date Modified: Sunday, 28-Aug-2016 13:06:14 EDT