Typography can set a mood and differentiate types of content on a web page. In the past, a few Web-safe fonts were the only alternative to graphical text. Now we can design with creative typography for headlines and body text without resorting to images. Google Fonts has over 800 of excellent free fonts and Font Squirrel is a treasure trove of fonts free for commercial use. Even traditional font vendors like MyFonts offer webfont versions of desktop fonts.

Google Fonts are served by Google, using its Font API. You don’t have to download or store the fonts on your site unless you want to do that. To use a particular headline or body font, do two things:

  1. Create a special link that fetches the Google font(s) and stores it in the visitor’s browser cache:

    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Arvo">

    Use a plus sign to indicate spaces in the font name. If the font has variants, place a colon after the font name and specify the variant (regular, italic, bold, etc.):

    <link href="https://fonts.googleapis.com/css?family=Over+the+Rainbow:regular" 
    rel="stylesheet" type="text/css">
  2. Create one or more CSS styles for elements that should display in the embedded font. The styles should be in your external CSS style sheet, but can also be used in inline CSS:

    h2 {font-family: 'over the rainbow', arial, helvetica, sans-serif;}
    body {13px/1.5 'droid sans', verdana, geneva, arial, helvetica, sans-serif;}

Some fonts are available in scripts (character sets) other than Latin or have variants for style (italic) and weight (bold), and so on. In the link tag requesting the font from Google, append variants to the font name after a colon (:). Append scripts after the font name and variants, preceded by an ampersand (&) plus the word subset.

This example is a request for two different fonts, separated by a pipe symbol (|): Cantarell italic and Droid Serif bold. Note that “i” may be used for “italic” and “b” for bold:

href='https://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:bold'

This example is a request for three variants of PT Serif, regular, italic, and bold, and the scripts cyrillic and latin:

href='https://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold&subset=cyrillic,latin'

gwebfonts-187x300

Limit web fonts to one or two on a site to avoid slowing down your pages. If you embed a popular font, it may already be available in your visitor’s browser cache without another download.

Mix fonts that are dissimilar. That is, if you use a sans-serif for the body font, a headline font could be serif or cursive. If you use two sans-serif fonts or two serif fonts on the same page, make sure they do not compete with each other or look jarring when used together.

More Information