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.