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.

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.

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:

h1,
h2,
h3,
h4,
h5,
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.

Related Tutorials

• Load CSS 2 Google Fonts In Genesis Child Themes