I first thought about writing this how-to article to add to my theme tutorials, but I decided to make a blog post about it instead so that I can share this how-to with everyone– even if you’re not using a Hearten Made theme (but you totally should be ?).

When I created the Dainty theme, I thought it would be a good idea to allow customers to choose ANY Google Fonts or system fonts that they wanted to use in the customizer. But when I created Thrive, my most recent WordPress theme, I only added about 35 Google font options! The reason why I changed it up? I realized that having too many options was very overwhelming for my customers. This is why I chose a small list of the most popular & my own personal fave Google Fonts for Thrive, and why I will probably never provide every single Google font option for an HM theme again.

But what if there’s a Google font you really have your heart set on, or another font you need to match your branding that’s not provided? Have no worries– I’m here to help you! I’m going to walk you through on how to add your own Google Fonts to the Thrive theme, or any other Genesis child theme.


01. Choose Your Fonts

Head on over to the Google Fonts page. When you see the font(s) you want, click the red + button. For this tutorial, I’m just going to add Economica and Martel.

Tip: I really don’t recommend using more than 2 or 3 fonts. Mixing and matching too many different fonts can look sloppy and unprofessional, and can also slow down your site loading time.

Click the + button to add a font.

After adding a font, you’ll notice a black box appears at the bottom of the page. It will say “2 families selected”, (or however many # of fonts you added). Click on this box to open it up and click on the Customize tab. You’ll see a list of your fonts and all of their weights and styles that are available.

Click on the customize tab to select your weights and styles.

02. Choose Your Weights & Styles

Check the boxes for any weights and styles you want. You most likely won’t use ALL of the weights & styles, so only add what you need. For example, I want to make Economica my main body font. So I’m going to check the regular, italic, and bold. If I don’t check the bold & italic, my bold and italicised words will show up regular. Next, I’m going to use Martel for my headings and I want them all to be bold. Because these will just be headings and not body text, I’m only going to choose the bold 700 option.

My selected weights & styles for this tutorial.

03. Grab Your Link Code

When you’re finished, click on the Embed tab and copy your link code. Under Specify in CSS, these rules are what you’ll need to add to your CSS adjustments later in this tutorial. So make sure you keep this page up or keep them somewhere safe!

Copy your link code.

From your WordPress Dashboard, go to Genesis > Theme Settings > Header/Footer Scripts. In the top Header Scripts section, paste your link code and then hit the Publish button.

Add your Google link code to the Header Scripts area.

04. Add the Fonts & Styles to Your CSS

Go to Appearance > Customize > Additional CSS. This is where we’re going to make the font adjustments and it will override the other fonts you’re using. If you’re NOT using the Thrive theme, you’ll need to find your own CSS selectors for your theme.

Here are all of the selectors for the Thrive theme below. Copy and paste this code into the Additional CSS section. I’ve added the font families, weights and/or style rules from this tutorial. You will need to adjust or replace them all with the ones that you chose, and delete any lines of styles you don’t need.

/*  MAIN BODY FONT  */
body, .site-description, span.woocommerce-Price-amount.amount, textarea#comment, textarea.wpcf7-form-control.wpcf7-textarea, .sharrre .share {
     font-family: 'Economica', sans-serif;
     font-weight: 400;
}


/*  SITE TITLE FONT (if you don't have a custom logo)  */
.site-title {
     font-family: 'Economica', sans-serif;
     font-weight: 700;
}


/*  HEADER MENU FONT  */
.genesis-nav-menu li, button.menu-toggle {
     font-family: 'Martel', serif;
     font-weight: 700;
}


/*  PRIMARY AND SECONDARY NAVIGATION FONT  */
.nav-primary .genesis-nav-menu li, .widget_nav_menu li, .widget_categories ul li, .nav-secondary .genesis-nav-menu li, .nav-primary button.menu-toggle, .footer-widget-area li {
     font-family: 'Economica', sans-serif;
     font-weight: 400;
}


/*  HEADINGS AND OTHER MISC. HEADINGS  */
h1, h2, h3, h4, h5, .entry-title, .widgettitle, .comment-author, .featuredpost .widget-title, .woocommerce ul.product_list_widget li a, .thrive-text-size-1, .thrive-text-size-2, .thrive-text-size-3, .thrive-text-size-4, .thrive-text-size-5, .thrive-text-size-6, .thrive-text-size-7, .thrive-text-size-8 {
     font-family: 'Martel', serif;
     font-weight: 700;
}


/*  SMALL DETAILS  */
h6, .page-hero .widgettitle, .page-grid-widget .widgettitle, .page-hero .wrap .widgettitle, .iandfc-widget .wrap .iandfc-content .widgettitle, .cc-widget .wrap .cc-content .widgettitle, p.entry-meta, p.comment-meta, .genesis_responsive_slider .widget-title, .breadcrumb, .gts-company {
     font-family: 'Economica', sans-serif;
     font-weight: 400;
     font-style: italic;
}


/*  BUTTONS  */
input, select, textarea, body.woocommerce-cart table.cart td.actions .coupon .input-text, button, input[type="button"], input[type="reset"], input[type="submit"], .button, a.button, body.woocommerce-page nav.woocommerce-pagination ul li a, body.woocommerce-page nav.woocommerce-pagination ul li span, body.woocommerce-page #respond input#submit, body.woocommerce-page a.button, body.woocommerce-page button.button, body.woocommerce-page button.button.alt, body.woocommerce-page a.button.alt, body.woocommerce-page input.button, body.woocommerce-page button.button.alt.disabled, body.woocommerce-page input.button.alt, body.woocommerce-page input.button:disabled, body.woocommerce-page input.button:disabled[disabled], .template-instagram-landing .widget_nav_menu a, .more-link.button, .pagination a, p.more-from-category a {
     font-family: 'Martel', serif;
     font-weight: 700;
}

You should be able to see all of your fonts changing live in the customizer. If you’re using the Thrive theme, you can still adjust letter spacing in the font option panels in the Customizer.

I hope this was helpful! Feel free to comment below if you have any questions!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *