Your templates already come with Theme Styles (color schemes and fonts) which we have pre-selected. But if you’d like to change them, you can do so by following the steps we have outlined below. Let’s tackle the Fonts in this guide.
Applying your own Theme Style-Fonts
In order for your Theme Style settings to apply to most of Elementor’s elements and widgets, you will need to disable Elementor’s default colors and fonts first. Here’s how to do it…
At the WordPress Dashboard, go to Elementor >> Settings >> Check the box "Disable Default Colors" to use your own color schemes >> Check the box "Disable Default Fonts" to use your own font selections >> When done, select Save Changes
Now, following the Shortcuts we provided in a previous guide, preview any page of your site and select Edit with Elementor >> select Page Section. You’ll then see something like this image below, with an Elementor Panel on the left. From here…
Click the Hamburger menu on the upper-left corner >> select Site Settings
You’ll then be led to the Site Settings Panel where the Theme Style settings are. There are 4 parts/tabs under this section —Typography, Buttons, Images, and Form Fields. We’ll run you through them now so you get the hang of it.
Typography Panel
This panel controls the appearance of different kinds of text as they appear on your site. From here, you can change the color, fonts (typography), and other space settings of text on your site. The typography panel further groups these into 3 types, as we explain below.
- Body. Body texts are the sentences and paragraphs that make up the main content of your site.
- Link. This section refers to the hyperlinks or clickable text on your template. Control how they look and behave by editing their settings at the Normal and Hover options provided.
- H1-H6 tags. These are the Headings or the titles used on your site. Headings give both your visitors and search engines important clues about the content’s hierarchy and importance. There are six “importance levels”, from the most important (or largest) H1 heading to the least important (smallest) H6 heading. We recommend you edit your heading settings following these levels.
Buttons Panel
This panel lets you control pretty much the same things like that at the Typography Panel. Customize the appearance and behavior of all the buttons at your site by changing their colors, text, behavior upon hover, shape (border-radius), and spacing.
Modifying settings at this level affect all elements in your selected template. So, to give you a freer hand and more design flexibility, we’ll skip the Images and Form Field panels for now. So go ahead and give it a try! Just don’t forget to hit the UPDATE button when you’re done!