How to Add and Customize Fonts in Elementor

Want to add some aesthetic cool and interactive fonts to your WordPress site? Elementor has more than 800 Google Fonts, and if you need more you can always add Custom Fonts as well for even more options.

In this blog, we are going to show you how to customize fonts in Elementor so let’s get into it.

Many Elementor Widgets offer the ability for you to edit text color and typography settings. These design options are located in the widgets’ “Style” tab. 

For now we are choosing the Heading widget for it.Under the Widget Setting > Style, click the edit icon to access the typography settings.

Now you can change font size, color, family & style within the Elementor WordPress Page Builder.

You will be able to change all font styles on any part of the post or page, within just about any block you want. So really, you can have all sorts of font styles on one page if you would like. The font section within the Elementor page builder allows you some real creative freedom.


Text Color: Choose the color of your text.


Family: Choose your font family.

Size: Choose a size for your font.

Weight: Choose the weight of the font.

Transform: Choose the Transform properties for the font.

Style: Choose between Normal, Italic, and Oblique.

Decoration: Choose the text Decoration.

Line-Height: Use the slider to set your line-height.

Letter Spacing: Use the slider to set your letter spacing.

Here is the preview of the Fonts once styled using the options in the “style tab”

Font hierarchy establishes a proper message and layout. Both size and color can play a huge role in how the reader interacts with the page and understands it. Proper font hierarchy also helps with page ranking and indexing.We hope this guide has helped you.

Feel free to contact us if you need any help regarding this topic. Do let us know the topics you want us to cover in the comment section or reach out to us with your queries by clicking the contact form below.