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:

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.

Never Miss a Tip from Brad Dalton

Get my latest web design tutorials, elegant coding solutions & useful tips.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Leave a Reply

Your feedback is always appreciated.

Your feedback is always welcome & appreciated however WP Sites does not reply to anonymous comment authors or approve loaded questions. Members get answers to unlimited questions.