In this article I am going to show you a quick and painless way of using fonts from the amazing Google Fonts service with your Drupal site. Have you ever wondered how you can do this?

I am certain there are contrib modules out there that work just fine, but in many cases they are an overkill. So let’s see an easy way of doing this for the custom theme you are developing. Just be aware that you can do this in a custom module as well.

First up, choose your font(s) from Google Fonts. For the purpose of this article, I chose Alegreya. Once you found it, click on the Quick use button for all the information you need about using this font.

Depending on the font itself, you can then select to also use multiple styles (like different weights etc). But be aware that the more you choose, the bigger the performance price you pay loading the font. Check the load time indicator for an idea of what this will mean for you.

Next up, scroll down the page till you see the Add this code to your website section. Normally you’d have to copy that entire
declaration and paste into the HTML head but since we work with Drupal, you can’t just do that. We need to use the API to include it on the page. So let’s do this in the theme you are working on.

Open the template.php file in your theme root folder (if you don’t yet have one go ahead and create it). And paste in the following code:

function yourthemename_preprocess_html(&$variables) {
   drupal_add_css('http://fonts.googleapis.com/css?family=Alegreya', array('group' => CSS_THEME));
}

And here you have to replace the link to the Alegreya font with the link to your own font you get from Google Fonts (in addition of course to the theme machine name in the preprocess function naming structure). After saving the file and clearing the cache you will notice in the source of your site a new
tag in the header linking to the font css file hosted by Google.

Update: for those who need to use the https protocol, you need to write it like this:

drupal_add_css('//fonts.googleapis.com/css?family=Alegreya', array('group' => CSS_THEME));

Thanks to Danny Englander for pointing this out!

So now all you have to do is use it in your stylesheets. Google Fonts even gives you the right css statement to paste in your css blocks. Just scroll down on the page you took the link from and you’ll see it. For me it is

font-family: 'Alegreya', serif;

And that’s all there is to it. Now you are using Google Fonts.