Import Fonts

How do fonts work?

Displaying a digital font requires a file that defines how the font is displayed. Web sites can either rely on the users to have suitable fonts on their devices, or else somehow distribute the font along with the other page resources like HTML and CSS files.

Which fonts are safe?

If you wish to rely on the users' computers to provide the font files, visit CSS Font Stack to see which fonts have over 90% coverage on both Windows and Mac computers. It's a short list!

Microsoft and Apple can change which fonts they ship at any time, and this site does not include mobile devices. There must be a better way...

Step 1: Select Fonts from Google Fonts

Open the Google fonts service.

Search for "Open Sans" and add it to the collection. Then choose another font, any font you like, that you will be able to identify when you see it applied. Add it to the collection as well. There should now be 2 fonts in your collection.

In the collection panel at the bottom of the page, click the "Use" button. Leave this page open. You will need the code in step 3 soon.

Step 2: Import and Use the Font on a Web Page

Open your template file and save a new copy as "import-google-fonts.html"

In the Google Fonts web page, step 3 gives you a LINK tag to copy into the HEAD tag. Do so.

Just after this LINK tag, add the following code:

<style> body{ font-family: "Open Sans"; } </style>

Open your page in a browser to test it. Use the element inspector to turn the font-family property on and off to see the difference.

Step 3: Bold and Italic Styles

Font files have to be included for all levels of bolding and italics. Add the following code to your STYLE tag:

h1{ font-weight: bold; }

Save and test. Note that it did not make the H1 bolder.

Go back to Google Fonts and check the box to include "Bold 700" with Open Sans. Then recopy the LINK tag and replace it in your file. Save and test.

What if Google Fonts service goes down?

This is an extremely rare problem. Google Fonts are very reliable.

However, if the Google Font service goes down, we should have our web page's visitors use a font from their own computer that is in the same family. We call this a generic fallback font and Google actually recommends this in the code they provide for step 4.

Go ahead and replace font-family: "Open Sans"; with font-family: "Open Sans, sans-serif; to provide a fallback just in case the Google Fonts service goes down.

Step 4: Use the Other Font

In your STYLE tag, add the following selector:

p{
}

Then use another font-family property inside this selector, for the other font you selected from Google Fonts.

Save and test your file to be sure your font was applied to the paragraph tag.

Double-check your work prior to submitting it.

What fonts are on this page?

Use your browser's element inspector and/or view-source feature to examine the code of this page.

You may have to follow a <link> tag to a separate stylesheet containing the CSS code. This is an alternative and usually better way to add CSS to a web page. We will discuss these methods and their pros and cons in a later lesson.

Notice how the fonts were imported using an @import statement in the CSS, instead of a LINK tag in the HTML. This is an alternative available at Step 3 from the Google Fonts page.