• Get In Touch
February 23, 2018

How To Add Google Fonts To WordPress

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.
Get Wordpress Hosting
Most people never give a second thought to the type of font they use, however, a good font selection can dramatically improve the design and professionalism of a website. If you are developing your own theme or editing a current one, font selection should be an important part of the process. Since the creation of Google Fonts, there are now over 800 font families to choose from. In the past few years, the development around implementing Google Fonts to your website has made the process considerably easier, meaning the hardest part of the process is simply picking which font you wish to use.

How Do I Add Google Fonts To My Website?

There are a number of WordPress themes available that include built-in options for altering Google Fonts. If your theme is one of these, simply head to the ‘Customizer’ and click on the ‘Typography’ tab. Here you will be able to edit all the main font types as well as weight and line spacing. If your theme does not offer built-in editing options for Google Fonts then don’t worry, there are 2 other ways you can add them to your site and they are.

Adding Google Fonts Using A WordPress Plugin

One of the best plugins for easily adding Google Fonts to your site is a free plugin called Easy Google Fonts. A simple and easy way to add custom Google Fonts to any WordPress theme, this plugin requires no coding at all. It integrates with the WordPress Customizer so you can preview Google Fonts on your site in real-time and offers the added bonus of being compatible with any WordPress theme. It also allows you to create custom theme specific font controls in the admin settings area to control particular CSS selectors. Once created, these custom font controls are instantly available in the customizer with no coding required. Another great plugin for customizing fonts on your site is the Yellow Pencil Live CSS editor plugin. The benefit of this plugin is that it not only lets you alter the fonts of your website via an easy click-and-edit method, but you can also customize all of your WordPress theme’s colours, font sizes, font weights, paddings and margins.  If you are developing WordPress themes and want to customize your site fonts without the use of a plugin then there’s one more way you can add them to your website.

Manually Loading Google Fonts In WordPress

Step 1: Selecting Your Custom Google Font

If you head over to the main page at “Google Web Fonts” 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 on your 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 (this is 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. 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. 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"; }

Finishing Up

And that’s all there is to manually loading Google Fonts to your website! With these methods you’ll be able to utilise all 800+ fonts available to you, meaning you can customize and personalise your site right down to the tiniest detail.

Some final tips are:
  • Make sure your header class hierarchy is balanced and that header tags reduce in relative size.
  • Half the battle of good site design and typography is to be consistent with your font choices. That includes font sizes, weights and spacing.
  • Be selective, take your time and test as many fonts as you can until you find the perfect one for your website.
Using Wordpress? Get our lightening fast Wordpress Optimised Hosting.
Get Wordpress Hosting

Share this Article!

Related Posts

5 Website Hosting Solution Trends for 2022 and Beyond

5 Website Hosting Solution Trends for 2022 and Beyond

Looking for the right web hosting solution for your website can be an intimidating task. Options nowadays are more diversified than ever, and each year brings new developments in the web hosting market. If you have no clue of what to look out for, you can find yourself overwhelmed with the choices. Hence, you must […]

64 Content Marketing Statistics Demonstrating the Power of Content

64 Content Marketing Statistics Demonstrating the Power of Content

Content marketing continues to be one of the most valuable tools for today’s online businesses. With content, you can improve your chances of reaching your target audience, boost your search engine standing, and even unlock new opportunities for sales. The more content you produce, the more you can strengthen your domain authority, demonstrate your thought […]

53 User Experience Stats for 2022

53 User Experience Stats for 2022

User Experience (UX) is one of the most crucial factors to consider in web design. As the number of websites and applications in the world today continues to accelerate, businesses are under more pressure than ever to impress customers straight away. If a user visits your website and finds slow-loading pages, clunky navigation, or errors, […]

How to increase the memory limit in WordPress

How to increase the memory limit in WordPress

Do you need to increase the memory limit in WordPress? Getting an error about memory Exhausted? The memory limit is one of the most common WordPress errors as the default limit of memory in WordPress is only set to 64mb! But there’s good news! The Memory Exhausted error is one of the easiest to fix […]

All in One WordPress Migration Vulnerability

All in One WordPress Migration Vulnerability

A vulnerability has been discovered in the “All In One WordPress Migration” WordPress plugin. All versions earlier than, and including 6.97 contain a vulnerability which allows Cross-Site Scripting (XSS). With over 2 million active installations, this vulnerability has the potential to be high impact, however, this is lessened by the nature of the vulnerability, which […]