My HP

23rd February, 2018 | Blog |
Back to list

How To Add Google Fonts To WordPress

Using Wordpress? Get our lightening fast Wordpress Optimised Hosting from £1.60 / month

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 from £1.60 / month

Get Wordpress Hosting

Related Posts

What Are Breadcrumbs And How To Add Them To WordPress
How to Embed Google Forms Into WordPress
4 Steps To Improving Your Rankings In Google With WordPress
How To Use Customizer To Add Custom CSS Styles To WordPress

Comments

Comments are closed here.