Current Assignments:
> HW-04
> HW-05

Due:
Mon Nov 06 @ 11:55PM
Previous module:
Next module:

Where to Get Fonts

Now that you know how to include a font, you need to know where to get them from.

Perhaps more importantly, you need to know what fonts you can use.

License

As with any content you find on the web that you want to use in your own projects, you must check its license to see if you are legally allowed to use it in the way you intend.

As with images, music, and video, fonts will fall under many different types of licenses. Some are very restrictive and require licensing fees, others will be given an MIT, GNU, or some other more open license.

However, even with these more open licenses, some fonts will still restrict what mediums they can be used freely on. This may include;

  • Personal use only (This restricts you to using this font only on your computer for word processing or graphic design. But will typically allow the work to be published to hard copy.)
  • Web embedding (This allows you to use the font for a website)
  • E-Book (This allows you to embed the font in digital content beyond the web)
  • Applications (This allows you to embed the font in a stand-alone application)

Locations

As with anything, a simple google search with a query like “free web fonts” should return many lists and resources.

A few specific locations though include;

  • Font Squirrel
    • This site has many GNU/MIT fonts, as well as “paid” fonts.
    • This site also links to other font sites.
  • Font Spring
    • This is trying to be a for-profit type site. However, there are many fonts which the site will give up for free, or release a few of the font-varieties from a larger family for free.
  • Google Fonts
    • Google runs everything. Of course they also have a font service.

An Example
Downloading a Google Font

Let’s look at how to get a font, with Google’s font service.

1. Navigate

Navigate to the Google Fonts page.

2. Browse

Browse their font collection. When you find one you like, select it. I am selecting Arvo on Google Fonts.

Browsing and Selecting a Font in Google

3. Select

From the top right of the browser, click the red “SELECT THIS FONT” button.

Select the Font with the red button in the upper right hand corner.

Then select the black “Family Selected” box that will pop-up in the bottom of the window so that it is visible.

Family selected box

4. Select Additional Font Styles

Now, select the “CUSTOMIZE” tag, where you can select the additional styles you may need. I am selected every style so that I can use this font as a general purpose font.

NOTE: Some fonts will not have every style.

Select additional font styles from the CUSTOMIZE tag

5. Download

In this pop-up box, select the download button from the top right. This will download the selected font to your computer.

Download the font

Try it yourself: Download the Arvo family!

6. Open the Directory

This will download a ZIP’d directory to your computer. Unzip this directory.

Inside the directory will be the font packages. There should also typically be a license file that will specify how you may use the font.

Directory with the font files.

7. Move the Fonts

Select all of the fonts from this directory that you intend to use, and move them to a fonts/ directory in the web project you are working on.

For a basic project, the directory may look like the following:

NOTE: There are both a fonts.css and style.css.

In your index.html file, add links to your style sheets in the head element. NOTE: Make sure you link the fonts.css document first.

HTML
<link rel="stylesheet" href="./css/fonts.css">
<link rel="stylesheet" href="./css/style.css">

Next, in your fonts.css document, link to the individual fonts so they may be used. Use the @font-face function to accomplish this.

For our example, the following would be in the CSS file:

CSS (css/fonts.css)
@font-face {
    font-family: 'Arvo';
    src:
        url('../fonts/Arvo-Regular.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Arvo';
    src:
        url('../fonts/Arvo-Italic.ttf') format('opentype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Arvo';
    src:
        url('../fonts/Arvo-Bold.ttf') format('opentype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Arvo';
    src:
        url('../fonts/Arvo-BoldItalic.ttf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

NOTE: Google only supplied us with ‘truetype’ fonts. This should be fine for most browsers. If compatibility was a concern, you would need to find all of the files, or convert the font packages to the other types with a service like Font Squirrel Generator

10. Apply in CSS

Next, in the style.css file, apply the font to be used as the “base font” for your web project site. You can use the “everything selector” to accomplish this.

NOTE: Remember to also include backup fonts, in case your font does not work or load for some reason.

CSS (css/style.css)
* {
    font-family: 'Arvo', serif;
}

11. Write Your Content

Last, write your content in the index.html.

For example purposes, I wrote the following;

HTML
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Download Google Fonts</title>
        <link rel="stylesheet" href="./css/fonts.css">
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>
        <header>
            <h1>I Think Arvo is a Cool Font!</h1>
        </header>

        <main>
            <p>This is some plain ol' text, in a paragraph.</p>
            <p>This is a paragraph with <em>emphasized</em> or <em>italic</em> content.</p>
            <p>This is a paragraph with some <strong>strong</strong> content.</p>
            <p>This is a paragraph with both <strong>strong</strong> and <em>emphasized</em> text <strong><em>TOGETHER!!!!</em></strong></p>
        </main>
    </body>
</html>

12. Result

Altogether, your fonts.css, style.css, and index.html should look like the following:

I Think Arvo is a Cool Font!

This is some plain ol' text, in a paragraph.

This is a paragraph with emphasized or italic content.

This is a paragraph with some strong content.

This is a paragraph with both strong and emphasized text TOGETHER!!!!

{ TODO: }

Attempt to recreate this fonts.css+style.css+index.html combo using GoogleFont's Arvo.

You can also download my example, if that's easier.

Previous section:
Next section: