menu

ICC565

CSS

2.6 Google Fonts

Contents

Overview

If you specify a font family and someone looking at your site does not have it installed, they will not be able to see the typeface that you have specified.

Some ways to ensure that this does not happen:

  1. Use one of the standard/universal fonts that most computers will have (but then everything starts to look the same or boring).
  2. Embed the font file.
  3. Or, use a font library like Google Fonts.

Google Fonts is a catalog of fonts that is always accessible (to anyone connected to the Internet). They are free and open source, help make the web look better, and they load pretty fast.

How To

  1. Visit the Google Fonts website and select a typeface to see a preview and styles available.
  2. Select all of the styles you want for that typeface. Warning: the more Google Fonts you use on one page, the slower the page will load (but it’s nominal).
  3. As you select font styles, you will see them listed in a side drawer (if it is not visible, click the icon in the top right of the page). Click the “Embed” tab on that side drawer.
  4. Follow the instructions in the drawer. Copy the snippet of HTML code and paste it into your HTML file within the <head> element. Make sure you add a space and a slash at the end of the code.
  5. Copy the snippet of CSS code and use that as the property and value of your selector.

Styles, Weights, Bolding

You'll notice that many of the Google Fonts have different styles which are specified by numbers ranging from 100 to 900 (closer to 100 is lighter/thinner and closer to 900 is thicker/bolder). To implement these, you will also have to specify that style number using the font-weight property in CSS. Make sure you remember to embed the font style and use the HTML code from Google!



font-family:'Recursive',sans-serif;
font-weight:300;

Bolding: You can try and make a Google Font bold by using the font-weight property. You may not notice a significant change to bold because this font does not have a default bold. In this case you will have to set the font-weight using the number (bold is usually 600 or 700).



font-weight:bold;
/* if the above line does not make your font look bold try this.
But make sure you have selected the style and embedded it properly! */
font-weight:700;

Italicizing: If you wanted to use one of the italic styles available, you will also need to use the font-style property. For example for Roboto Thin 100 Italic, use:



font-family: 'Roboto', sans-serif;
font-weight:100;
font-style:italic;