Mike Cho Development

Add Google Font to WordPress

We need access to the functions.php file of our current theme and the link to the Google font.

I’m going to add Rubik to my theme.

<link href="https://fonts.googleapis.com/css?family=Rubik:400,700,700i' rel='stylesheet' type='text/css'>

If this were a normal HTML file, we’d paste that up in the head area and be done with it. But that’s not best practice for WordPress.

We’re going to use a hook to implement it.

Go to functions.php and add a nice comment to make it easy on those who come after us (it may be our future self!).

/**
 * Add Rubik Google Font
 */

Looks pretty clear!

Now we write a function.

function your_theme_add_font() {
  $font_script = <<<'EOD'
  <link href='https://fonts.googleapis.com/css?family=Rubik:400,700,700i' rel='stylesheet' type='text/css'>
EOD;
  echo $font_script;
}

If the <<<‘EOD’ thing is confusing, understand that it’s called “heredoc syntax” and is just a way to input strings. You could also use quotes like normal.

Now that the function is written all that’s left is to hook into an action. This will run the function.

We’ll use wp_head, since we want the link to be outputted in the head of the installation.

add_action('wp_head', 'your_theme_add_font');

Note that the second argument is the name of the function you just wrote. We usually use the name of your theme to differentiate it from other, similarly named functions.

What happens now (assuming everything goes right!) is that your stylesheet will now show up in the head of your page.

Rubik is now available for your use.