How to include a Google font not available in @font-your-face module?

Question

I want to use a Google Font on my site. I saw the @font-your-face module and installed it. Unfortunately, it does not offer the version of the 'Pacifico' font I want.

Google suggests adding the following:

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

Is it possible to add it to all my Drupal page without fiddling with core code? Or is there are better way to add a font to my site?

Answer 1

Rather than using the @font-your-face module, try the Google Fonts module instead. It fetches the current font list from Google - and Pacifico is included. I've used the module in several projects - it works well and unobtrusively.

Answer 2

You can add it by using drupal_add_css() in your template.php file's template_preprocess_html() function:

function mytheme_preprocess_html(&$variables) {
  drupal_add_css('http://fonts.googleapis.com/css?family=Pacifico', array('type' => 'external'));
}

Answer 3

The simpliest and quickest method is to add

@import url(http://fonts.googleapis.com/css?family=Fontname:400,700|Fontname2:400,700);

in one of your drupal css files. You can find this ready-generated snippet everytime you select font to use.

Answer 4

I would simply modify the html.tpl.php in your sub-theme, and add the <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> where you want.

I think it's clean, fast, and it won't pollute your hook_preprocess_html.

Answer 5

If you're looking to add simply add a to the html head, you can use the drupal_add_html_head() function in hook_page_alter(). I like this technique as it means one less module for a complex site. See this article for an example.

Answer 6

90% of all time, I add the following into my page.tpl.php file.

  drupal_add_css('http://fonts.googleapis.com/css?family=Lato:400', array('type' => 'external'));

For greater control, use

$element = array(
  '#tag' => 'link',
  '#attributes' => array(
    'href' => 'http://fonts.googleapis.com/css?family=Lato:400', 
    'rel' => 'stylesheet',
    'type' => 'text/css',
  ),
);
drupal_add_html_head($element, 'lato'); // You can change the word lato.