HomeBlogHow to Add Google Fonts to a WordPress website

How to Add Google Fonts to a WordPress website

Google Fonts on WordPress Website

What do Steve Jobs, movie posters, comics, and your favorite blog have in common?

They all stress brilliant typography. Who wants to read anything if it is unbearable to do so? Font type and size are critical elements in determining the success of a major call-to-action or the likelihood of someone reading your 7,000 word review on Disney’s newest attraction.

With resources like Google Fonts, it is easy to find the font to match your tone and style. But how do you implement it on your WordPress website? Well, my friend, you are going to want to continue reading for the answers.

Finding the right Google Font

The first thing you will need to do is find the right font that you want to use. Google has a huge library of fonts and can be sorted and filtered by popularity, font weight (thickness) and other elements.

Google Font to wordpress javascript

It does not matter what font you select from the site as you will ultimately be able to copy the code in the same fashion regardless the font. Once you have made your selection, you will want to click on the box with the arrow pointing to the right to be taken to the next step.

In the next step, you will be able to select any and all font weights that you would like access to on your theme. Maybe you want your title or H1 text to be thicker than your content. Maybe you want it all the same.

This page will also tell you the page load speed of the font. Perhaps that font looks nice, but it is a resource hog.

Find out what font a site is using

What if you are stuck and don’t know what font you would like to use for your site. First, try going to the blog that you really like or another site where you really admire the typography. Go to a CSS viewer or source viewer and try to find out what font is being used on that site. You could mimic them.

Want something cooler? You can always use Font Face Ninja, a FREE Google Chrome and Safari extension that literally tells you what font a site is using. It truly is a cool free tool of the web.

Putting the font on your site

Okay, so you have exhausted your resources and found the ultimate Google Font for your WordPress website. Now, you actually have to get that font on the site. So, how do we put a Google Font on a WordPress website?

Step 1) Put Javascript in the Header

On the page where you view the page load speed and different weights, you scroll to the bottom and select the “Javascript” option. This will be a long piece of code that you will want to copy and paste at the top of your Header or <head> section in the HTML code of your website. This will activate the font so that it is retrieving the font.

Google Fonts copy javascript

Step 2) Grab CSS code

In section 4 of the page, you will notice a small line of code for CSS. You want to copy this code so that you can reference it. This code will allow you to choose where the new font appears on the site.

Step 3) Put CSS code between brackets of your chosen font

Time to learn a bit of CSS. Don’t worry, it won’t hurt too much.

If you are at all familiar with CSS, you will know that you need to put any code changes between brackets as they apply to different classes on your website.

If you want all of the fonts on your site to be the new Google Font, with some possible theme exceptions, you will want to use the body HTML element, like so:

body {
font-family: 'Lobster', cursive;
}

Step 4? Different Google Font weights

If your selected Google Font has different weights and you want to add function for different weights, you can do so by registering all requested fonts and then adding an additional line of code to the CSS to determine font weight of a specific element, like this example:

body {
font-family: 'Lobster', cursive;
font-weight: 400;
}

Custom Scripts and Styles

Confused about where to go to modify this information? With pro versions of our Slocum Themes, there is a tab for custom scripts and styles so that you can very easily make these changes. Go to Appearance > Theme Options and navigate to the Custom Scripts and Styles tabs. There you will find an entry box where you can paste the Google Font Javascript code to the header. Below that, you will find a CSS area where you can paste the Google Font code you would like for making modifications to the CSS.

Google Fonts on a WordPress website

Here is a before and after image of our themes, the first with a default theme font and the second with the new Google Font once the above code pasted into the custom scripts and styles on the WordPress theme.

BEFORE

Before Google Fonts

AFTER

Google Fonts After

As you can see, simply modifying the font can have a serious impact on how your website looks and feels. Have fun adding Google Fonts to your WordPress website and let us know if you have any questions below.

This entry was posted in Blog, Design, Modern Business Pro, WordPress

Leave a Reply

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