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


Complete The Following Tasks

Visit Font Pair to browse hundreds of Google font pair combinations and decide on a font pair for your website.
Write down the names of your favorite heading fonts and body fonts so that you can test them in the WordPress Customizer in the next step.

Watch Our Video Tutorial

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.

Step 2: Change Your Fonts In The WordPress Customizer


Complete The Following Tasks

Add your font pair to the WordPress Customizer. You can use our LP-SETTINGS-typography template to make this step easier. Watch our video below to learn more.
In the WordPress Customizer, go to Global > Typography.
To open the Customizer, go to Appearance > Customize in your WordPress admin.
Click on Base Typography and select the font you want to use from the Family drop-down list. Adjust the Weight and Line Height if necessary.
Click on Headings and select the font you want to use from the Font Family drop-down list. Adjust the Font Weight if necessary.
Our recommended headings sizes are as follows. These should have been automatically updated when you imported our recommended Astra settings in the previous step.

Heading 1: (3.4, 2.6, 2.3) em
Heading 2: (2.8, 2.3, 2) em
Heading 3: (2.3, 2, 1.8) em
Heading 4: (1.7, 1.6, 1.5) em
Heading 5: (1.3, 1.3, 1.2) em
Heading 6: (1.1, 1.1, 1.1) em
If you want to adjust the line height for your H1-H6 Headings, you can do so in the Additional CSS tab of the Customizer.
We added this Additional CSS code as a work-around for users using the free version of Astra.

If you want full control over Astra's typography settings (and more advanced features) we recommend upgrading to Astra Pro.
Click Publish to save your changes.
You Earned A Badge!

Watch Our Video Tutorial

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 “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 SECTION-templates-3.zip file.

Submit a question

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2.
Your Progress
0

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.