Possibly one of the most exciting advances in font embedding, Google’s Web fonts API allows you to embed various non-standard fonts into your site. There are a wide variety of fonts to choose from and the full list can be found in their font directory.

Implementing a font or multiple fonts is very easy and can be completed in 2 easy steps.

Step 1

The first thing you need to do is import the font from Google’s fonts API. You will need to place the following code inside the head tags in your header.php file.

Please not that this must be included before your site CSS so that the fonts can be used in your CSS styles.

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

This will import the font Droid Sans for use in your CSS. Note the + sign in between Droid and Sans. All spaces in font names need to be replaced by + signs.

To request multiple font families, separate the names with a pipe character (|).

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans|Inconsolata">

Step 2

The next step is to use the imported font in our CSS style. To use the Droid Sans font in our h1 tags we would use the following style:

h1 {

font-family: ' Droid Sans', serif;


It really is that simple!

So to recap…

You can load all of your fonts in one call to Google’s Font API using the pipe character (|) to separate the fonts and the plus sign (+) to replace any spaces in the font name. Then all you have to do is include the fonts in your CSS font-families.