CSS, Google, Tutorials, WordPress

How to use Google Fonts in your WordPress Theme

Using Google Fonts in your WordPress Theme is very easy and it can be completed in 3 simple steps.

Go to Google Web Fonts, browse all the fonts available for use on your website and pick any font you like. For this example, I will be using Droid Sans.

Click on the font name to go to the font page and then click on Use This Font tab and copy and paste the css include into the <head> section in Header (header.php) file of your WordPress Theme.

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

Edit the Stylesheet (style.css) file of your current WordPress Theme and add the following line of CSS:

SELECTOR { font-family: 'Droid Sans', arial, serif; }

Replace SELECTOR with the correct selector; for example: h1, .title, .post h2, etc.

And that's it. It is very simple and doesn't require any font replacement techniques that use Flash or Javascript.

Browser Compatibility of Google Web Fonts API

According to the Official FAQs, the Google Font API is compatible with the following browsers:

  • Google Chrome: version 4.249.4+
  • Mozilla Firefox: version: 3.5+
  • Apple Safari: version 3.1+
  • Opera: version 10.5+
  • Microsoft Internet Explorer: version 6+

It also works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod).