If you visit the Google website:

https://www.google.com/fonts

You will find hundreds of fonts that you can use for your website, free of charge. How this works is that you place a line of text into the <head> section of your website. This is a link to the font that you wish to use. The browser sees this font and fetches it from Google for use on your visitor's browser. It must fetch this font for each new user. The font files are not kept with your site files, but is kept at Google. You also need to specify in your style sheet which elements are going to use this font along with some backup fonts in the case that this font cannot be used.

The advantages to using Google fonts are:

  • They are free. Using other 3rd Party fonts files may cost you dearly.
  • Having a font load with your website allows you to use fonts on your site that may not come with your visitor's computer.
  • There are no licence restrictions with these fonts
  • These fonts will load on most all computers and mobile devices, but you should specify a common web font in case the UA cannont use this font.
  • These are generally quality fonts which means that they will read nicely, the letters will line up and space out well and the edges are sharp and crisp. Some 3rd Party fonts will be choppy or fuzzy or do not have the letters spaced properly.

Navigating the Google Web Font Page

Left Hand Column

Font Selection Text Box

If you have a certain font name in mind, you can type it into this text box and go to that font directly. If Google Fonts does not carry that font, they will let you know.

Filters:

All Categories: This is a drop down list with check boxes for Serif, Sans-serif, Display, Handwriting and Monospace. Here you can filter out the style of font that you wish to use.

Thickness: This provides a slider so that you can filter out fonts with light lines to thick lines.

Slant: This has a slider that allows you to select from upright fonts to fonts with a decided slant.

Width: This has a slider to let you select from narrow characters to fat rounded characters.

Script:

Certain languages require a certain script style for the various characters and letters in that language. Here you can filter out fonts that work with these different script sets. You can always test drive a certain word, phrase or paragraph in that font to check on its functionality in the chosen language.

Styles:

This is set to show all styles or hide all styles. What this means is that for each font, the screen will show a range of the possible font styles - Normal, Bold, Italic, etc., that are available for each font family. This only appears as an option with the Sentence tab.

The Tabs Along the Top

There are four tabs along the top, Word, Sentence, Paragraph and Poster.

Word Tab: This allows you to see how a single word will look in a variety of fonts. You can type the word into the text box right below the tab. This is good for headings, company names and site titles.There are several columns of fonts in this view for a faster comparison.

Sentence Tab: This is the active tab when you first come to the site. It allows you to type in a sentence to see how it will look in various font families. This is good for a site description, mottos, headings, etc.

Paragraph Tab: This tab allows you to see how the various fonts will look in a paragraph format. You can see how well the fonts work with the body copy for your site.

Poster Tab: This lines up the font family examples in large blocks. You can't type in sample text here, but you get a quick view of the fonts. You can also sort the view by the Appearance, Size and how you want the display sorted.

How to use your chosen Google Font

OK, you have found a font or fonts that you want to try on your site. Now what do you do?

Click on the Add to Collection button. At the bottom of the screen you selection of fonts will stack up. Click on the Use button to the far right.

A new screen will appear.

Step 1: This will allow you to select various styles (if available for that font) if you want to use bold or italic text. The more thinkgs you select, the longer the page load. There is a handy meter to alert you for long page load time.

Step 2: If your language reguires certain character sets, you can select those here.

Step 3: There is the line of code that you need to place in the <head> section of your website's pages. This line must appear on any pages that will use this font. Each font that you have chosen will be added to this single line. If you come back later and want a new font, you can add that line as a separate line in your <head> section. They do not have to be in a single line, but this will speed up the page load if they are in a single line.

With Step 3 there are also tabs of @import and JavaScript. This cod will be required if you are using the @import feature or if you are using JavaScript to load your font files.

Step 4: You are given code for your style sheets for the font-family porperty for the elements that will use this font. Each separate font that you have chosen has a different font-family line. Each font also has a suggested backup font, though you can add to this list if you want. You can copy and past this code into a separate txt file for later reference, if you want.

Back at your web site files

With a text editor, add the <link...> line of code to the <head> section of your web pages.

Example:

<head>
...<link href='http://fonts.googleapis.com/css?family=Aguafina+Script' rel='stylesheet' type='text/css'>
...
</head>
<body>
<h1 class="fancyfont">This will be in my Google Font</h1>

With a text editor, assign the font-family line of code to the selected elements in your web site.

Example:

h1.fancyfont {font-family: 'Aguafina Script', cursive; }

Now test it out on your site in several browsers.

Other Notes about Using Google Fonts

Not all fonts work well for headings and site titles.

Not all fonts work well for readability in the content area of your site.

Only load the font files that you are going to use. Loading uneccessary font files slows page load speed.

Test the font with your own text.

You can try out several fonts to be sure that you like the results. Test it on several different browsers.

The fonts are loaded in a set of sizes. 300, 400, 600, etc. These fonts can be set to any font-size, but if it is not one of the predetermined font sizes, your browser interprets how it should look. This can result in choppy or fuzzy fonts.