Skip to main content
Easily create better & faster websites with the Total WordPress Theme Learn More
(opens a new tab)
Tutorials

How to Manually Load Google Fonts in WordPress

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.

Step 1: Select your Custom Google Font

Using Google font’s is very easy. If you head over to the main page at “Google 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.

Step 2: Enqueue Your Google Font

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"; }

Extra: 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.

Your Thoughts…How do you use Google Fonts?

On to you now! Let us know in the comments how you are using Google fonts in WordPress. Are you developing themes or plugins, creating custom websites or are you a freelancer helping people tweak their current site designs. Also let us know what some of your favorite google fonts are. My personal favorites are Roboto, Lora and PT Serif.

5 Comments
  1. Affan Ruslan · 12 years ago

    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?

  2. Bucur · 11 years ago

    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…

  3. Muhammad Zahid · 4 years ago

    Hi,
    Every time I load my website it loads with the Times Roman font and then switches to the original one. It seems like a small jerk for a millisecond. Can you please assist me that how I can fix this issue.

    • Kyla · 4 years ago

      That’s just your fonts loading – nothing to worry about. But you could consider editing your site to preload your fonts if you’re worried about it (checkout this WP-Rocket guide).

Leave a Reply

Your email address will not be published. Required fields are marked *

Learn how your comment data is processed by viewing our privacy policy here.