Google Font API

Shashwat Srivastava

Shashwat Srivastava

— 3 min read

Got bored with all the default fonts that can be used in a webpage? Looking for a third party font set to make your website more attractive? Well then you can use Google Font API. It doesn't involve any programming just basic html and css coding knowledge will suffice.

Benefits of Google Font API -

  • High quality and attractive free open source fonts.
  • Fonts are served in compressed form so it won't affect your webpage load time.
  • You don't have to worry about cross browser font compatibility. Google will that for you.
  • Extremely easy to use.

To be able to use Google Font you just need to add a special stylesheet link to your HTML page and then through CSS you can use the fonts wherever needed. Check out the sample code given below -

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet'     type='text/css'>
  <style>
    body {
       font-family: 'Reenie Beanie', arial, serif;
       font-size: 40px;
    }
  </style>
</head>
<body>
<h1><span style="color: blue;">Google</span> <span style="color: red;">Font</span> <span style="color: green;">API</span><span style="color: orange;"> Tutorial</span></h1>
</body>
</html>

And you will get something like this as output -

Google Font API Tutorial

Here as you can see there is a stylesheet link with its base url as http://fonts.googleapis.com/css. Now to use a particular font you just need to add ?family=FontName to the base url; in our case it is Reenie+Beanie. You can find the complete list of available fonts here - Google Font directory.

If there is a space between the font name just add '+' character instead of space character in the url. For example the font used in this example is Reenie Beanie. So the url will be http://fonts.googleapis.com/css?family=Reenie+Beanie.

Now try out this modified code -

<html>

<head>
  <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
  <style>
  body {
   font-family: 'Reenie Beanie', arial, serif;
   font-size: 40px;
   text-shadow: 4px 4px 4px #555;
   }
  </style>
 </head>
 <body>
 <h1><span style="color: blue;">Google</span> <span style="color: red;">Font</span> <span style="color: green;">API</span><span style="color: orange;"> Tutorial</span></h1>
 </body>
</html>

Changes have been highlighted. You font will now look even more cool with a background shadow.

Google Font with shadow

To load multiple font families, separate the font family names with a pipe character (|).For example, to request the fonts Reenie Beanie and Droid Sans:

http://fonts.googleapis.com/css?family=Reenie+Beanie|Droid+Sans

Note: Using too many fonts may slow down loading of your pages.

The Google Font API will provide by default the regular version of the font. To use other styles or weights, append a colon (:) to the font name, followed by a list of styles or weights separated by commas (,) as shown below.

http://fonts.googleapis.com/css?family=Reenie+Beanie:bold,bolditalic||Droid+Sans

The table given below lists all the styles that may be available for a particular font.

Style            Specifiers                                    bold            bold or b or a numerical weight such as 800                            italic            italic or i                            bold italic            bolditalic or bi

The example below illustrates how to use styles.

<html>
 <head>
  <link href='http://fonts.googleapis.com/css?family=Droid+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'
  <style>
  body {
   font-family: 'Droid Serif', arial, serif;
   text-shadow: 4px 4px 4px #aaa;
   }
  </style>
 </head>
 <body>
 <h1>Google Font API Tutorial - Regular</h1><br />
 <h1><i>Google Font API Tutorial - Italic</i></h1><br />
 </body>
</html>

Screenshot of the above example -

Google Font API tutorial

Now you are ready to implement Google Font API in your own webpages. Enjoy!

Read more