Using Google Web Font API

The Google Web Font API provides you with a fantastic, flexible way to use custom fonts in your website. However, the instructions that are given may leave you scratching your head a-little if you are using WordPress – regardless of if you are using Wonderflux or not!

There are lots of ways to deploy in Google Web Fonts – from echoing out content, hard-coding into template files and probably a couple of others I can’t think of. To cut a long story short – these are mostly wrong! Because the Google Font API basically is a link to a CSS file on Google servers, The ‘WordPress’ way of adding a custom font would be to use the core WordPress functions wp_register_style and wp_enqueue_style. Here’s how you would do it using the Wonderflux hook wf_head_meta and the font Source Sans Pro at weights of 300 and 600.

In your child theme functions file:

// Add Google fonts
function my_wfx_add_google_font() {
  wp_register_style(
  'g-font-1',
  'http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600',
  '',
  '1.0',
  'screen, projection'
  );
  wp_enqueue_style( 'g-font-1' );
}
add_action('wf_head_meta', 'my_wfx_add_google_font', 3);

You will then need to alter your style.css to define rules that use the font you have loaded, for instance to use our new Google Font on h1, h2 and h3 we would put the following into our main style.css:

h1, h2 { font-family: ‘Source Sans Pro’, sans-serif; font-weight: 600; }
h3 { font-family: ‘Source Sans Pro’, sans-serif; font-weight: 300; }

This Wonderflux guide document was last modified on: August 31, 2012 by Jonny