How-to Guides

How to Add Fonts in WordPress Elementor for a Stylish Website

If you’re eager to enhance the visual appeal of your WordPress website created with Elementor, custom fonts can make a significant difference. Adding fonts to your website not only provides a unique touch but also contributes to a more engaging user experience.

In this guide, we’ll walk you through the simple steps to add fonts using Elementor, ensuring your website stands out.

Why Add Custom Fonts in WordPress Elementor?

Before diving into the process, let’s understand why adding custom fonts is beneficial. Custom fonts allow you to:

  1. Establish Brand Identity: Use fonts that align with your brand, reinforcing your visual identity.
  2. Enhance Readability: Choose fonts that are easy to read, contributing to a better user experience.
  3. Stand Out: Differentiate your website from others by using distinct and eye-catching fonts.

How to Add Fonts in WordPress Elementor?

Follow these Steps to Add Fonts in WordPress Elementor:

Step 1: Choose Your Fonts

Before adding fonts, decide on the fonts you want to use. Select fonts that match your website’s purpose and design aesthetics.

Step 2: Obtain Font Files

Download the font files in the required formats (usually TTF, OTF, WOFF, or WOFF2) from reputable sources or purchase them if needed.

Step 3: Upload Font Files to WordPress

Access your WordPress dashboard, navigate to “Appearance,” and select “Customize.” Look for the “Typography” or “Fonts” section, depending on your theme. Upload your font files there.

Step 4: Use Elementor’s Custom Fonts Feature

Inside Elementor, when editing a page, navigate to the left panel and click on the section you want to modify. Under the “Style” tab, find the typography settings. You should now see the custom fonts you uploaded.

Step 5: Apply Custom Fonts

In Elementor’s typography settings, locate the font dropdown menu. Your uploaded custom fonts should appear there. Apply them to different elements such as headings, paragraphs, or buttons.

Step 6: Save and Update

Once you’ve customized your fonts, click “Save” in Elementor and then “Update” on the WordPress page to apply the changes.


Adding custom fonts to your WordPress Elementor website is a straightforward way to elevate its aesthetics. By carefully selecting and applying fonts, you can create a visually appealing and unique online presence. Enhance your brand, improve readability, and make your website stand out by following these simple steps.