Shutting Down Notice

I have decided to shut down launchparty.org and discontinue our tutorials and templates.

Sadly, it's just not going to be possible to execute LaunchParty’s long-term vision with the new Elementor 3.0 design system.

Our website will be accessible (but not updated) until November 1, 2020. If you plan on using our templates after we shut down, be sure to download our preview images.

If you have any questions, feel free to contact me.

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

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

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.
This Additional CSS code was added as a work-around for users using the free version of Astra. (This code was added when you imported our recommended Astra Customizer settings in our Astra theme tutorial).

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 with Elementor Pro 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. In your WordPress admin, go to Elementor > Custom Fonts and watch this video tutorial.

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

Be sure to add as many file types as possible since different browsers will require different file formats. Also, you’ll need to add the font files for every font weight you’re adding.

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.