Using Google Fonts
By Stephen Bucaro
In the past, web designers were restricted to a small group of fonts referred to as
"web-safe". Web-safe fonts are the standard fonts installed with the Windows and Mac
operating systems. With the CSS @font-face rule, web designers can load fonts from
external sources, they no longer have to use one of the web-safe fonts.
But now, you can easily link to hundreds, if not a thousand beautiful fonts hosted
by Google Fonts. All the fonts
are released under open source license, so you can use them in any non-commercial or commercial project.
The first step is to pick a font that you like. Just above the sample of the font,
you'll see the name of the font. Paste the link shown below into the head section
of your webpage, then replace the text "Barrio" with the name of the font that you have selected.
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Barrio">
Note that when you mose hover just below the name of the font you'll see a drop-down
list of the available styles of that font, e.g. Regular, Italic, Bold, in various sizes.
Next, place a style block, like the one shown below, just below the link. Again,
replace the text "Barrio" with the name of the font that you have selected.
font-family: 'Barrio', 'Sans Serif';
Note that following the comma after the name of the font is the name of a fallback
font. In the example above it calls for a generic 'Sans Serif' fallback font. One problem
with loading a font from another website is that it takes time to load. All modern browsers
will display the fallback font until the primary font completes loading.
Your fallback font should be a web-safe font. Web-safe fonts are the standard fonts
installed with the Windows and Mac operating systems. The most common web-safe fonts are
Arial and Verdana. Of course, you can never rely on any specific font to be
installed on the users machine, but it will use the closest match. You can also specify
a generic 'Sans Serif' or 'Serif' fallback font.
You should test the fallback font by making an error in your google link, preventing google's
font from loading, so you can see how your webapge looks with the fallback font. Make sure
the fallback font does not distort the layout of your webpage.