Genesis - How to change fonts in your theme using Google Fonts

In this tutorial, we'll show you how to change the fonts in your 17th Avenue theme using Google Fonts. While there are plugins available that can change fonts for you, they are often very clunky to use and can slow down your website. Manually changing the fonts is the best method, and it's super easy. Let's get started!

The Easy Method

1. Select your fonts

Your first step will be to choose what fonts you'd like to use on your site. Go to fonts.google.com to access the font library.

On the right side of the page, there are several filters you can use to help narrow down your search. You can click on a font name to view more information about the font, type in your own text, view font pairings, etc.

Once you've found a font you would like to use, click the red plus icon to select the font.

The font will be added to a dark gray bar at the bottom of the page.

Click on the bar to open the font window, and then go to the Customize tab. This is where you'll be able to select the weights (regular, bold, etc) and styles (italic) you'd like to use for each font. Every font will have different weights and styles available.

If one of the fonts you selected is going to be the body font (i.e. the font for your post text), you'll want to make sure you select italic and bold styles. Fonts used for headings, buttons, etc don't usually need multiple font weights and styles. It's a good idea to use the  least amount of weights and styles as possible so that your fonts load quickly on your site.

2. Embed the fonts on your site

Once you've selected your fonts and chosen weights and styles, click the Embed tab next to Customize. Copy the code shown in the screenshot below.

Go to your WordPress dashboard > Genesis > Theme Settings and scroll down to the Header Scripts section. Paste your code in the box.

3. Add the fonts to your theme

Now it's time to implement your new fonts in your theme! You'll want to reference Google Fonts for the appropriate CSS rules for the fonts you've selected.

In our example, the CSS rules are:

    font-family: 'Playfair Display', serif;

    font-family: 'PT Sans', sans-serif;

Below are the most common CSS classes for different areas of your theme where you can change the font. Here's what you'll do with these:

  1. Copy the code for one section you want to change.
  2. Go to your WordPress dashboard > Appearance > Customize > Additional CSS.
  3. Paste the code in the box.
  4. Go to Google Fonts and grab your own font-family CSS rule. Select the font-family line in the code and replace it with your own. For example, if you are changing the body font to Open Sans, it would end up looking like this:
body, .entry-content p {
    font-family: 'Open Sans', sans-serif; }

Site Title/Header Font

.site-title, .site-title a, .site-title a:hover {
    font-family: 'Playfair Display', serif; }

Description/Tagline Font

.site-description {
    font-family: 'PT Sans', sans-serif; }

Navigation Font

.genesis-nav-menu a {
    font-family: 'PT Sans', sans-serif; }

Body Font / Text Font

body, .entry-content p {
    font-family: 'PT Sans', sans-serif; }

Headings Font (H1, H2, etc)

You can either add copy all 6 of these and add them to your theme, or just the one(s) you need.

h1,
h2,
h3,
h4,
h5,
h6,
.enews-widget .enews .widget-title,
.home-area .woocommerce .product-title,
.wpmtst-testimonial { 
    font-family: 'Playfair Display', serif; }

Featured Page Widget Titles

.home-area .featuredpage.widget .widget-title { 
    font-family: Playfair Display !important; }

Post/Page Title Font

.entry-title,
.page.page-template-default:not(.home) .entry-title,
.archive-title {
    font-family: 'Playfair Display', serif; }

Sidebar Title Font

.sidebar .widget-title { 
    font-family: 'PT Sans', sans-serif; }

Sidebar About Section Font

#about {     
    font-family: 'PT Sans', sans-serif; font-style: normal; }

Button Font

button,
input[type="button"],
input[type="reset"],
input[type="submit"], 
.button, 
.widget .button, 
.archive-pagination li a, 
a.more-link { 
    font-family: 'PT Sans', sans-serif; }

Post Meta Font

.entry-header p.entry-meta,
.entry-footer p.entry-meta {
    font-family: 'PT Sans', sans-serif !important; }

Footer Credits Font

.creds,
.creds p,
.footer-menu a {     
    font-family: 'PT Sans', sans-serif; }


The Better (but more advanced) Method

Requires entry-level (or beyond) CSS knowledge.

1. Embed fonts

Follow section 1 above to select your fonts in Google Fonts.

In Google Fonts, under Embed Font, copy the PORTION of the link that is shown in the screenshot below.

Go to WordPress > Appearance > Theme Editor > Theme Functions (Functions.php).

Before making any edits to your PHP files, please make sure that you have access to the File Manager in your cPanel or FTP. PHP is incredibly sensitive and if a mistake is made, it can cause the "white screen of death" on your site. Having easy access to your File Manager means you can easily upload a fresh copy of your theme if the need arises.

Find this section in the Functions.php file: (will look slightly different depending on which theme you're using)

Select the link highlighted above and paste your new link to replace it. Click Update File.

Please note: if you're planning to keep any of the original theme fonts, you'll want to select them in Google Fonts so they are included in your embed link.

2. Add the fonts to your theme

Go to Appearance > Theme Editor > Style.css. 

The simplest way to change the fonts is the "search and replace" method. For example, if you want to change all instances of Montserrat to PT Sans, here's what you'd do:

  1. Click inside the Style.css file.
  2. Click Ctrl+F (or Command+F on Mac) to search the code. Search Montserrat.
  3. Replace Montserrat with PT Sans in the CSS code.
  4. Repeat until Montserrat no longer comes up in search; repeat for any other fonts.