How To Install Google Fonts In Any Theme – Beginners Guide

Google provide hundreds of different web fonts you can use for free anywhere in your theme.

In this tutorial, i’ll show you step by step how best to load Google fonts so you can use them in your themes style.css file.

1. Choose Fonts

Simply go to Google’s website and choose one or more fonts.

Choose Google Fonts

  1. Type in the name of the font family
  2. Click Add to Collection
  3. Click Choose
  4. Click Use

2. Install Fonts

After you click Use, scroll down to the 3rd step where you can see different methods of installing your fonts.

add code to website

In this tutorial, we’ll use PHP code to install your fonts in your child themes functions file.

All you need to do is replace the font names in the code below with your own.

In this example, you only need to replace Oswald|Open+Sans in the PHP code with the names and/or font sizes you have chosen.

The PHP in the Gist above should be copied from the view raw link and then pasted in your child themes functions.php file using a code editor like Notepad++.

3. Add Fonts To CSS

Open your themes style.css file and replace the original value for the font-family in any CSS rules you want to use your Google fonts.

In the example below, we’ll change the font for the text on the body to ‘Open Sans’.

body {
	background-color: #f2f2f2;
	color: #222;
	font-family: 'Open Sans', Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.6;

The font-family values contain fallbacks so ‘Helvetica Neue’ will load in place of Open Sans if it fails to load and so on.

In the example below, we’ll change the font for the headings to Oswald:

h6 {
	color: red;
	font-family: Oswald, Helvetica Neue, Helvetica, Arial, sans-serif;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	margin-bottom: 10px;
	margin-bottom: 1rem;
	padding: 0;

Fonts Not Working?

If your fonts are not changing, it may be because you haven’t changed the original value for your font-family property in your style sheet, you may need to clear any caching or you haven’t loaded them correctly in your PHP code.

Need More Help?

Join WP Sites to get full access to all tutorials & code.

  • Support for installation & modification of existing PHP code
  • Help with Genesis & StudioPress theme customisation
  • Access all tutorials & code snippets
  • Ask questions in the comments & get answers
  • Education - Request video explaining how the code works and what functions are included

Click Here to Learn More