Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

Or sign up with email below...

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Day 2: Design Your Website

How To Pick Your Google Font Combinations

Action Plan

Step 1: Use Font Pair To Get Ideas For Possible Font Combinations

Why This Step Is Important

Finding the right fonts for your site is another great way to enhance your site’s design. Because of this, I would recommend taking your time on this step to make sure you’ve found a font combination that you’re really happy with.

Visit Font Pair

Font Pair offers hundreds of recommended Google font combinations for your website. Browse these recommendations and choose one heading font and one body font for your website.

Watch Our Video Tutorial For This Step

This video will walk you through how to use Font Pair to find the appropriate heading font and body font for your website. You will also learn the difference between serif and sans-serif fonts.

Video Summay

  • Visit Font Pair
  • Make a list of which heading fonts and body fonts you like (0:29)
  • You can type on the page to change the text (0:54)
  • Use the main menu to select Sans Serif and Serif categories (1:00)
  • What’s the difference between Sans Serif and Serif (1:10)
  • Take your time creating a list, make the final decision in the next step (2:48)

(I made a list of my favorites heading fonts and body fonts)

Step 2: Change Your Fonts In The WordPress Customizer

How To Change Your Fonts In WordPress

You can change your default fonts in the WordPress Customizer by going to:

Global > Typography > Base Typography
Global > Typography > Headings

Watch Our Video Tutorial For This Step

This video will walk you through how to change your heading font and body font in the WordPress Customizer. You will also learn how to use our LP-SETTINGS-typography template to help finalize your decision.

Video Summary

  • Log into your WordPress dashboard (0:18)
  • Make sure you have “Disable Default Fonts” checked in your Elementor settings (0:22)
  • Go to Elementor > My Templates (0:38)
  • Search for “settings”, find the “LP-SETTINGS-typography” template, and click “View” (0:46)
  • Click “Customize” in the admin bar at the top of the page (1:02)
  • Go to Global > Typography > Headings (1:15)
  • Preview your font changes on the right as you adjust the settings (1:25)
  • Change the heading font and choose the font weight (1:45)
  • Some fonts have more font weight options than others (2:10)
  • Change the body font (3:15)
  • Click “Publish” to save your changes (3:58)
  • Discussing advanced typography settings (4:05)

(I changed my heading font and body font in the WordPress Customizer)


How do I add my own custom fonts?

If you want to use a font that’s not available in the Customizer, you can easily add your own custom fonts by following these steps:

  1. Convert your custom font into the necessary multiple formats (EOT, OTF, SVG, TTF, WOFF, WOFF2) using this converter. Download the newly converted fonts to your computer.
  2. Install and activate the Custom Fonts plugin by Brainstorm Force
  3. In your WordPress admin, go to Appearance > Custom Fonts and upload each of the font formats you just downloaded.

Once you have completed the steps above, your new custom font should now appear in the Customizer’s font selector.

How do I adjust the line height for my headings?

If you are using our recommend Customizer settings found in our Astra tutorial, you’ll notice an option to adjust the line height in the “Additional CSS” section of the Customizer.

h1 {line-height:1.2 !important;}
h2 {line-height:1.2 !important;}
h3 {line-height:1.3 !important;}
h4 {line-height:1.4 !important;}
h5 {line-height:1.5 !important;}
h6 {line-height:1.6 !important;}

You can use this code to adjust the line height for each of the heading sizes. Keep in mind this code is a work-around for free Astra users. If you want full control of Astra’s typography settings we recommend upgrading to Astra Pro.

Why don't any of my fonts change when I adjust the Customizer settings?

If the fonts on your website are not changing when you adjust the Customizer fonts, it could be that you didn’t check the box to “Disable Default Fonts” on the Elementor settings page. In your WordPress admin, go to Elementor > Settings > General and check the box that says “Disable Default Fonts”.

Please note that there are some additional important settings you should adjust, I recommend watching our Elementor installation video.

Why doesn't the font size of the body font change when I adjust it in the Customizer settings?

First, please see the previous question where we discuss the “Disable Default Fonts” setting in Elementor.

If that doesn’t fix the issue, it could be because of the body {font-size: 100%} code we added to the Additional CSS tab of the Customizer. (This is only relevant for older users of our course who imported the old version of our astra-settings.dat file.)

To fix this issue, open your Customizer and go to the Additional CSS tab and remove the line that says body {font-size: 100%}. Click the Publish button at the top of the page to save your changes.

I can't find the LP-SETTINGS-typography template

Did you download and import our Elementor templates? All of our “LP-SETTINGS” templates can be found in the file.

Have a question?
Click here to submit your own

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2. The small commission we receive from your purchase helps us keep our tutorials completely free.
Your Progress

How Can This Challenge Be Free?

Our "Website In A Weekend" challenge is supported by the small affiliate commissions we receive from SiteGround Hosting and Elementor Pro. Other than this, we are not associated with SiteGround or Elementor in any way.