Google Fonts for Drupal... The Hard Way

Manual typesetting

Image credit: Willi Heidelbach

I may have turned into a Drupal curmudgeon. The signs were already there... I don't install WYSIWYG editors unless I have to. More and more I choose to write code rather than install a module.

I had been using the Google Fonts module and I wanted to switch fonts. There was a problem with the new font for some reason—I spent about 30 minutes troubleshooting before I gave up and decided to just do it manually.

Sometimes, the Hard Way is the Easy Way

I know that the module really just provides a user interface to select a font and it adds a line of code to the <head> section of the page. For one line of output, why should I install an entire module? Here's what I did:

First, I went to the Google Fonts site (https://www.google.com/fonts and found the font I wanted. There's a nice interface for selecting the font variations you want. It gave me a single line of code that should go in the <head>:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

Drupal 7 uses the function drupal_add_html_head() to add code to the <head>, so I had to put everything into an array to be rendered. The array is then added using hook_page_alter(). In this case I added it to my theme's template.php, but it can also be added to a custom module. You can see the URL from the <link> above is used in the href element of the array.

function mytheme_page_alter($page) {
  $element = array(
    '#tag' => 'link',
    '#attributes' => array(
      'href' => 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700',
      'rel' => 'stylesheet',
      'type' => 'text/css',
    ),
  );
  drupal_add_html_head($element, 'google_font_open_sans');
}

Done? Well, almost... I actually had two fonts. I could repeat the code above for each font, but decided to make it a little cleaner with a foreach loop. Here's the upgraded version that adds fonts for both Open Sans and Short Stack:

function mytheme_page_alter($page) {
  $element = array();
  $element['google_font_short_stack'] = array(
    '#tag' => 'link',
    '#attributes' => array(
      'href' => 'http://fonts.googleapis.com/css?family=Short+Stack',
      'rel' => 'stylesheet',
      'type' => 'text/css',
    ),
  );
  $element['google_font_open_sans'] = array(
    '#tag' => 'link',
    '#attributes' => array(
      'href' => 'http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700',
      'rel' => 'stylesheet',
      'type' => 'text/css',
    ),
  );
  foreach($element as $key => $value) {
    drupal_add_html_head($value, $key);
  }
}

Often, as in this example, the hard way is actually quicker and easier. I could have saved the 30 minutes of troubleshooting, eliminate one of the many modules on the site and never have to install another module update.

NOTE: The Google Fonts module is no longer being developed. If you decide to do add Google Fonts the easy way, try the @Font Your Face module instead.

Comments

You can also just do it this way:

add

@import url(http://fonts.googleapis.com/css?family=YourFontName);

to the top of your CSS file and you can reference the font-family

Based on the feedback, I think I need a follow up article to address the different ways of adding fonts. Coming soon!

I like this way of doing and thinking, "why install a module for one line of code ?" you summed that up pretty right.

About the @font-your-face module, I'm using Open-Sans for a current project and noticed that the font was not rendered the same way. I had to use your snippet so it would be correctly displayed.

The 'regular' weight was slightly bigger and messed up the whole thing.

Thanks for the refinement.

Lately, I've been opting to not use Google services. Not all users may like the fact that Google is quietly collecting data each time the fonts are loaded.

Add new comment