How to Add Custom Fonts to WordPress with Elementor

You are currently viewing How to Add Custom Fonts to WordPress with Elementor

Do you want to give your WordPress website a unique touch with a custom font?

If so, you came to the right place.

Although Elementor is already pre-loaded with various fonts, we can still add a custom one to differentiate ourselves from other websites.

This tutorial will show you how to add a custom font to your WordPress website using the powerful Elementor page builder plugin.

Why to Use a Custom Font?

Custom fonts are a powerful tool for bolstering brand identity and creating a unique visual style.

They offer designers creative freedom to tailor typography, enhancing aesthetic and thematic coherence.

Custom fonts are optimized for screen readability and support web accessibility. They distinguish designs, increasing memorability and impact in a sea of standard fonts.

They ensure consistency across diverse media, reinforcing brand integrity. Exclusive designs cater specifically to brand requirements, promoting uniqueness.

Moreover, custom fonts afford designers greater control over licensing and usage rights, ensuring legal compliance.

Ultimately, custom fonts elevate visual identity, enrich user experience, and amplify design impact.

How to Add Custom Fonts to WordPress With Elementor

Elementor Pro simplifies the process of adding custom fonts to WordPress.

While it’s still possible to manually upload custom fonts to WordPress, it is way easier with Elementor.

Before learning how to add the custom font to WordPress, you must have it downloaded to your local computer.

There are plenty of websites from which you can download fonts, such as DaFont and 1001freefonts.

Once you found your desired font, click on the Download button.

Elementor widget libraries

Download custom font

Then, follow the steps below to add custom fonts to WordPress with Elementor:

  1. The file will be downloaded as .zip, and you must unzip it first to access the font file. Save zip font file

  2. After extracting the file, enter it into its folder to access the font file (usually TTF, but it can also be WOFF, WOFF2, SVG, and EOT) Font file ttf

  3. In your WordPress dashboard, navigate to Elementor -> Custom Fonts and click the Add New button. Add new font to Elementor Pro

  4. Enter the Font Family name (match it with the font name), and click the Add Font Variation button. Enter font family name

  5. Then, click on the Upload button next to the font format (the format you downloaded) and add it. Upload custom font file to Elementor

  6. Click Publish to make your custom font available to use. Publish custom font WordPress

Once you publish the font, we should test it to ensure it’s working correctly.

Therefore, click the Edit with Elementor button to open the visual editor screen.

Then, choose the element you want to change (usually a title) and expand the typography tab. 

Expand the Font Family dropdown list and search for the custom font you added.

The title’s font will change accordingly after selecting your new custom font, which indicates it works correctly.

Select custom font Elementor

Finally, update the changes and visit the live site to ensure the new custom font is active and visible.

Conclusion

WordPress and Elementor come with hundreds of pre-loaded fonts for us to use. However, sometimes, they don’t have the one we want.

Custom fonts are a great way to build a brand story and character.

Therefore, this tutorial showed you how to add your favorite custom font to Elementor to enrich your business and brand recognition.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply