Typography Settings

Last Updated on

One of the important factors to have a good looking website is Typography. Jupiter X provides a full set of Typography settings that cover all your needs to shape your context. In order to preserve the best performance results, Jupiter X only loads the fonts you added to the customizer. It means that in order to set a font for one part of your website, you need to add it first to the customizer, then you will be able to select that font from different places where you have the typography options.

All of the settings below can be found in WordPress left the menu, Appearance > Customize.

In this article


Where can I use the font options in my website?

Every single element that has a text content, has a typography and font option. There is a difference between the global typography options and Elementor typography settings. When you choose a typography setting in Elementor, it will override the global typography settings that have been set in the Theme Customizer.
You can set these options in different places of Customizer based on the item you are going to edit:

Option nameIconResonsive
Font Family No
Font Size Yes
Font Color No
Font Weight No
Font Style No
Line Height No
Letter Spacing No

 

What fonts can I use in Jupiter X?

840+ Google Fonts (which are free) and every Typekit font in your Typekit account can be used in Jupiter X. Please note that Elementor has another Typography setting which is all presented here.

Can I use a Custom Font in Jupiter X?

Right now, there is no option that let you add a custom font in Jupiter X. However, since there are plenty of free plugins out there that easily let you upload and customize your fonts, it’s no longer needed to be added to the theme. Also, Elementor Pro has a custom font function, but that’s an Elementor thing, not the Jupiter X theme customization.

 

Adding a Font

To add a font family for later use:

1
From the customizer left dashboard, go to General Settings > Fonts.

2
In the fonts popup, click on Add a Font Family.

3
Select your font families and close the popup.
x
Note: After adding the font families, make sure to Publish the changes and Refresh the page.

Assinging a Font

After adding the font family, you can assign it to any element/page/place on your website:

Header Navigation

To assign your font to the header navigation:

1
From the customizer left dashboard, go to Header.

2
From the header popup, go to Styles tab > Menu.

3
Select one of the added font families, Close the popup and Publish the changes.

Elements (body, H1,H2,H3, paragraph, etc.)

To assing your font to a specific HTML element on your pages:

1
From the customizer left dashboard, go to Element Styles.

2
Click on Customize next to an element that you wish to assign the font family to.

3
Select one of the added font families, Close the popup and Publish the changes.

 

There are more places where you can use the fonts you added to the customizer such as Header -> Menu, Blog Title, Page titles and etc. As it’s already mentioned, Every place that have a text in the theme, can be customized to have a different set of font options.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket