Using Google Font API

Featured Image

For many years web developers had to rely on fonts being available on viewers' machines. Not any more - thanks to Google Font API.

I'll present just one simple example of this method. For a list of available fonts go to Google Font Directory. For a complete documentation visit Google Font API.

Example:

This is normal font. And this is Tangerine font from Google.

You have to make the font available by adding one line to the header of page, and then add style:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
.fpw-tangerine-normal {
    font-family: Tangerine, serif;
    font-size: 48px;
}
</style>


Note: there are two methods of adding things to the header. Modify your theme(s) template ( not recommended ) or use Footer Stuff plugin by Roy Tanck which will do this trick without messing up your template files.

Now you can display it:

<p>This is normal font. And this is <span class="fpw-tangerine-normal">Tangerine</span> font from Google.</p>

Leave a Reply

Links are not allowed in comment field!

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