Need some help with your project? Contact me

How to use Google Web Fonts with Drupal

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('', 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('//', 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.


Great article, thanks.

Question: how big is the performance overhead using this technique?

Hey there,

Google Fonts has this nifty little indicator that can give you an idea. But with regards to the actual Drupal site, I haven't experienced any problems. The files are hosted on Google servers so they are pretty good I presume. And if you don't load a lot of different fonts at the same time, you should be fine.

Isn't it easier to do it at the top of your css file with the "@import" statement ?

@import url(;

Can be useful in case you use a subtheme and don't want to copy the original template.php edit it.

Maybe easier, but it prevents downloading the Google Font and your CSS file where you placed the @import in parallel.

Hey Michael

The downside to not using the drupal_add_css method is that when you turn on CSS compression on the site, that css file doesn't get compressed along with the others.

True. I didn't know back then :p

Why this should be it? My CSS file is being compressed by my theme / Compass, while the font file is downloaded from Google servers.. what is the difference then? I don't understand

THANKSSSSS!! I thought this was the best option and it WAS! Thanks!

To tell you the truth I have never used the @import feature in css so I don't know how it behaves exactly.

Another module dropped because of snippets like this. Very nice. Thanks for sharing!


I would like to incorporate a Google Internet Font in my own Corporate Clean theme.

Where tag can be modified by me? I Have to include ... ...


Open the template.php file that is in the corporate clean theme directory. Then search for the function corporateclean_preprocess_html. Add it as the last line within that function. Something like this:

function corporateclean_preprocess_html(&$variables) {
if (!theme_get_setting('responsive_respond','corporateclean')):
drupal_add_css(path_to_theme() . '/css/basic-layout.css', array('group' => CSS_THEME, 'browsers' => array('IE' => '(lte IE 8)&(!IEMobile)', '!IE' => FALSE), 'preprocess' => FALSE));
drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => '(lte IE 8)&(!IEMobile)', '!IE' => FALSE), 'preprocess' => FALSE));
/* add Google Font */
drupal_add_css('', array('group' => CSS_THEME));

This is great. Now I dont have to install additional modules.

For adding multiple fonts, keep adding drupal_add_css() with your other fonts:

function yourthemename_preprocess_html(&$variables) {
drupal_add_css('', array('group' => CSS_THEME));
drupal_add_css(',700', array('group' => CSS_THEME)); /* another font added */

Or just group them together and load them from the same URI

function yourthemename_preprocess_html(&$variables) {
drupal_add_css(',700,400italic|Bree+Serif&subset=latin,latin-ext', array('group' => CSS_THEME));

Cool! But...
How to extract font name from google font url programmatically?

why not just add this to html.tpl.php ? is there something wrong with this practice? thank you.

Thanks for the article
this works as expected after updating template.php in my bootstrap sub-theme
after clearing cache.

Add new comment

You can post comments in Markdown and basic HTML tags.
For code blocks, wrap your code within '~~~'. For example:
$var = 'my variable';