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:

Appearance > Customize > Typography > Base Typography

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:28)
  • Go to Elementor > My Templates (0:31)
  • Search for “settings”, find the “LP-SETTINGS-typography” template, and click “View” (0:37)
  • Click “Customize” in the admin bar at the top of the page (1:00)
  • Preview your font changes on the right as you adjust the settings (1:10)
  • Go to Typography > Base Typography (1:16)
  • Change the heading font and choose the font weight (1:35)
  • Some fonts have more font weight options than others (2:22)
  • Change the body font (3:36)
  • Click “Publish” to save your changes (4:20)
  • Do not adjust the font size, line height, or margin bottom settings (4:38)

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

FAQ


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 “Custom 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 my fonts change on my site?

If the fonts on your website are not changing when you adjust the customizer fonts, it could be that you didn’t “Disable Default Fonts” in your Elementor settings. 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.

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 that download.

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
0

Your Achievements

You have earned 0 badges

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.