External Fonts from the Web

Sometimes, as with embedding movies and audio, it is easier and more efficient to utilize a service that will deliver the fonts via their servers.

This type of service will allow you to not worry about font-package types. As the service will often query the browser and deliver the appropriate type. Additionally, this means that you do not have to manage the fonts on your server space.

Google Fonts, in addition to allowing for font downloads, also provides a font server service.

There are embed links from the same pop-up window that allows you to download a font-package. Simply copy the HTML or CSS embed code from their site into the appropriate place. Then specify the font in CSS rules.

Example

As an example, lets do the same thing as the previous page, but instead, use Google’s embed code.

To do this, we will pick up after step 4. (NOTE: Make sure you have still selected a font, and gone into the CUSTOMIZE tag to select any additional font styles you may need.)

Select additional font styles from the CUSTOMIZE tag

5. Embed

Instead of downloading the fonts, select the “EMBED” tag next to “CUSTOMIZE”. Select the EMBED tag

Then depending on whether you want to include the embed code in your HTML OR CSS, select the “STANDARD” tag OR “@IMPORT” tag.

Then copy the code below in the gray box.

STANDARD

Standard Embed Code

This would go in the <head> element of index.html;

HTML

<link href="https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i" rel="stylesheet">

@IMPORT

'@IMPORT' Embed Code

This could be placed either in;

a CSS file, such as at the top of your style.css file.
the index.html file inside a <style>...</style> element.

NOTE: Where ever you place it, you must make sure it appears before you try to assign the font.

If we placed this in our css file, it would appear at the top like;

CSS

@import url('https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i');

Use the Font

At this point, the font is ready for use. We could pick up from [step 10 on the previous page].

To accomplish the same thing as the previous page, our final code would look like the following;

NOTE: We are using the “HTML link” method from Google fonts for embedding the font code. As such, this is placed in our HTML.

Directory

.
├── index.html
└── css
    └── style.css

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Download Google Fonts</title>

        <!-- The Google Font Embed Code -->
        <link href="https://fonts.googleapis.com/css?family=Arvo:400,400i,700,700i" rel="stylesheet">
        <!-- Our Style Sheet -->
        <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>

CSS (style.css)

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

Follow these links to download, view on GitHub, or view the page;

[Code Download]

[View on GitHub]

[Live Example]

{ TODO: }

Please read;

“Avoiding Faux Weights And Styles With Google Web Fonts”, by Laura Franz