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

Example with Google Fonts

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

• Arvo on Google Fonts

3. Select

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

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

4. Select Additional Font Styles

Now, select the “CUSTOMIZE” tag, where you can select the additional styles you may need (NOTE: Some fonts will not have every style).

I am selected every style so that I can use this font as a general purpose font.

5. Download

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

• Quick link to 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.

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.

.
├── index.html
├── css
│   ├── fonts.css
│   └── style.css
└── fonts
    ├── Arvo-Bold.ttf
    ├── Arvo-BoldItalic.ttf
    ├── Arvo-Italic.ttf
    └── Arvo-Regular.ttf

8. Link the Style Sheets

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.

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

9. Link the Fonts

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;

@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, incase your font does not work or load for some reason.

* {
    font-family: 'Arvo', serif;
}

11. Write Your Content

Last, write your content in the index.html.

For example purposes, I wrote the following;

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

Result

When you open you page, it should look like the following;

If you want to view it separately, or look at / download the source code;