Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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.

<style>
body
{
font-family: 'Barrio', 'Sans Serif';
font-size: 36px;
}
</style>

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.

More Easy Cascading Style Sheets:
• How to Color Alternating Rows or Columns in a Table
• How to Overlay Text on an Image
• Easy Text Drop Shadows
• Easy CSS Buttons
• Basic Introduction to Simple Responsive Design With Code
• Write Style Rules to Make Them Understandable
• Make a Fixed-width Variable-height Round Cornered Box
• Add Style to Your Blockquotes
• Use @font-face Rule to Load External Fonts For Your Webpage
• How to Style a Table