Home > CSS, Front End Development, How to, HTML > Quick Tip: Using Google Fonts for your website

Quick Tip: Using Google Fonts for your website

August 17th, 2010


Google has offered yet another fantastic service that allows you to add new free fonts to your web pages. This article will give you a quick run down on how to do this.

Google Font Directory

Tired of using the same ol’ fonts for every web page? I know I am. Google offers a directory of fonts that you can quickly add to your website with 2 lines of code. Doesn’t get much easier.

Step 1: Select a Font

Visit the Google Font Directory and pick out a font. There isn’t a huge list, but what they do have is nice and clean.

Step 2: Get the Code

After you click on the font you want, just click on “Get the code”. Google offers up 2 lines of code. One a CSS include for the font you selected, and the CSS to implement it.

Step 3: Use the Code

Copy and paste the code into your document. El finito. This is the code I used for the headers in this article.

1
2
3
4
5
    <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>

    <style type="text/css" media="screen">
        h2 { font-family: 'Reenie Beanie', arial, serif; }
    </style>



Top