Manually Adding Google Fonts To WordPress Themes

The Google Fonts Webfonts API allows you to easily load custom fonts (as opposed to standard desktop fonts like Arial, Georgia, Times New Roman or Helvetica) simply by referencing a stylesheet in your site’s header tag. If you are developing WordPress themes and want to customize your site fonts without the use of a plugin you can easily enqueue custom Google fonts on your site for use in your CSS.

How To Use Google Fonts

Using Google font’s is very easy. If you head over to the main page at “https://www.google.com/webfonts” and click on any font a little pop-up will appear so that you can then customize the font and view the correct URL for the font CSS.

If you are creating a simple HTML site or you are editing your personal custom WordPress theme all you need to do to load the custom font onyour website is copy and paste the stylesheet link to the custom font which is hosted on google into your <head> tag (located in header.php in WordPress).

That said the preferred way of adding the Google font to your WordPress theme (very important when creating themes for distribution) is to make use of the WordPress wp_enqueue_scripts action hook.

Loading Google Fonts With WordPress

As mentioned earlier you can easily drop the code from Google into your header.php file, however, it’s best to enqueue the script via the action hook as noted previously. This allows for easier child theme modifications and also prevents conflicts with 3rd party plugins.

Step 1: To start paste the following code into your functions.php file (if this file doesn’t exist, create a new one in your theme’s folder and make sure the code below is pasted within php tags.

function myprefix_enqueue_google_fonts() { 
	wp_enqueue_style( 'roboto', 'https://fonts.googleapis.com/css?family=Roboto' ); 
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_google_fonts' ); 

In this particular snippet we used the wp_enqueue_style function to load the “Roboto” Google font on the website. However, you can use this function multiple times to load multiple fonts.

Step 2: Now you just have to open your style.css file and change the font name for the elements you want the custom font for or add some Custom CSS to your site to alter the font such as the following example to change the whole body font to Roboto.


body { font-family: "Roboto"; }

Using a Google Fonts WordPress Plugin

Of course if you are not developing a theme for distribution or you are not using a child theme for you project then it may be best to use a custom plugin for adding fonts to your site. In the article titled “Improve Your WordPress Website Typography With Google Fonts” we recommend some awesome plugins that will allow you to easily alter the fonts on your WordPress site and more specifically using Google Fonts.

AJ Clarke
Post Author: AJ Clarke

Hey. My name is AJ and I am the boss around here. I own and operate WPExplorer. A website dedicated to everything I love about WordPress.

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. Affan Ruslan says:
    Hi, how do I do if I want to register multiple google webfonts? I know I can paste it multiple times, but is there any better way to do that?
    • AJ Clarke says:
      AJ Clarke
      This is an old post...I don't really recommend adding Fonts like this anymore. You should check out this plugin, it might work great for your needs: http://www.wpexplorer.com/google-fonts-pro
      Admin
  2. Good tutorial google do good work. :) A small question how do if I want to add 10 fonts? Thinking about a solution and I do not know if it's good to put this code in header.php each time for each one...

Leave a Reply