Add Google Fonts to your WordPress site

Learn how to add Google Fonts to your WordPress website.

In this tutorial I will show you how to jazz up your website by adding Google Fonts to your website.  You will learn how to select Google Fonts, add code to your functions.php file, and to your styls.css file.  As always, I will be using the Genesis Framework.  I used a modified version of the Genesis sample theme.  You can find the theme here.  Below you will find the PHP and CSS code. In seven easy steps, you will learn how to customize your typography.  Let’s get started!!

Step 1

Add this to your functions.php file

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
//* Enqueue Lato Google font
add_action( 'wp_enqueue_scripts', 'wpb_load_google_fonts' );
function wpb_load_google_fonts() {
	wp_enqueue_style( 'google-font-lato', '//fonts.googleapis.com/css?family=Lato:300,700', array(), CHILD_THEME_VERSION );
}

Step 2

Select the font you would like to use from the Google Fonts website.  Click here

Step 3

Click on the quick use button

Step 4

Review the options you would like for your font and then copy the name of the font.

Step 5

Add the copied font name to your functions.php file

Step 6

Copy the font name from google fonts

Step 7

Add the font name to your CSS style sheet.