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.

Add new comment