How to Use Google Web Fonts

Goggle Fonts is a service that provides hundreds of open source web fonts, free to use by website developers and owners. In this article we will learn a simple method to use the Google Fonts API and add beautiful web fonts to your site.
 
The HTML
Int the head section of your HTML page add a link the the google fonts service with the name of the font you want. In this case we use “Open Sans”. You can go here to browse all the available fonts.

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

To add multiple fonts, separate them with a pipe “|”.

<link href='http://fonts.googleapis.com/css?family=Indie+Flower|Dancing+Script' rel='stylesheet' type='text/css'>

 
The CSS
Now you can use the new font(s) in your CSS styles.


h3{
  font-family: 'Open Sans', serif;
  font-size: 32px;
}

 
The Live Demo

Indie Flower

Dancing Script

Open Sans

 

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Pin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg this

You may also like...

1 Response

  1. vaibhav Arora says:

    Really awesome article!

Leave a Reply

Your email address will not be published. Required fields are marked *