Welcome to Bucaro TecHelp!

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

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Using Google Fonts

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:
• Create CSS Button Rollovers
• How to Make Images Responsive
• How to Use a Pull Quote
• Code to Move the Scrollbar to the Left Side
• How to Overlay Text on an Image
• How to Style a List
• CSS 3D Rotation Examples
• Create a Cool Picture Frame Effect with CSS
• Easy CSS Tabbed Navigation
• Make a Fixed-width Variable-height Round Cornered Box

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268