HomeInternetHTMLUse Google Web Fonts on Your Website

Use Google Web Fonts on Your Website

I am no typography expert, but using the same standard fonts for your website gets boring. Google Web Fonts has an entire library of hosted fonts for your use on your next web project. This tech-recipes tutorial explains how to setup Google Web Fonts on your site.

1 Browser over to http://www.google.com/webfonts/

Google Webfonts

2 Browse all the fonts and find one you want to use. You have the option to use just 1 font family or to use multiple. First, let us look at how to use one font family by itself. Start by selecting the “Quick Use” link.

Google Fonts Quick Use

3 You will see some information such as the page load time using this web font. Remember, the browser will have to check Google’s server to grab the font and display it to visitors. At step 3 we have 3 options on how to use these fonts. We can use a standard link, @import, or Javascript. It comes down to personal preference, but I just use the standard link attribute.

google web fonts add code to website

4 Now you copy and paste the code into your website’s header just as you would link to a CSS style-sheet.

5 We now have the font linked to our website. We need to set one of our style attributes so we can actually use the font. It is as simple as declaring the font-family but by using the name of your new font. Remember to use a fall-back font that is web safe.

6 Here is it in action.

7 To link multiple font-families, select “Add to Collection” on the fonts you want, instead of the Quick Use option.

google fonts add to collection

8 You can do this for as many fonts as you want; however, remember this may increase your page load time. When you have all the fonts you want, select Use in the bottom right of the website.

google web fonts use

9 You will be given the code again, except this time all the fonts will be combined into one link statement. Put the code in your header and style your content in the same manner as step 4.

Chris Luongo
Chris Luongo
Chris is a self-taught web designer and developer out of Atlanta, GA. This geek enjoys coffee, cold brews, bike riding, and twisting any form of tech into submission.


Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

Cleveland Furia on How to Clear Google Activity
Sid Wohlfarth on How to Clear Google Activity
Riley Magsayo on How to Clear Google Activity
สมัครรับเครดิตฟรี ทันที on How to improve Remote Desktop Protocol Performance
Neal Wangstad on How to Clear Google Activity
Slavcho Andov on How to install Ubuntu
Slavcho Andov on How to fix bad sectors
Sheraz Ali on How to Backup Android