Fonts

Fonts are pretty cool, but not essential for this class, so you can read this when you have time and energy.

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("path/to/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. 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:

@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 the Google Fonts API

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 to your HTML file (it goes in the head)
Add the CSS code 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> element goes into the head of 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.