Would you like to know how to add custom fonts in Elementor? If your answer is yes, you’re in the right place. Here in this guide, I’ll show you how to add custom fonts in both Elementor’s free and pro versions.
For any reason, if you want to add custom fonts to your Elementor website instead of using built-in Google fonts, then this guide is just for you. Using custom fonts instead of Google fonts benefits your website, as it loads faster in comparison.
Many of you might be wondering how custom fonts load faster. The reason is that if you use Google fonts on your website, the server needs to wait to load that font from Google’s server when your website loads. However, when you add custom fonts hosted on your server, there’s no need to wait for them to load from any other server.
So, using a custom font is also beneficial for your Elementor website speed optimization. So, using a custom font is also beneficial for your Elementor website speed optimization. Okay guys, without further ado let’s get started.
Quick Note: Before we dive into that I want to tell you that there are different methods to add custom fonts in both Elementor Pro and the Free version. In this article, I will share both methods with you, so stay tuned with this guide.
Contents
How To Add Custom Fonts To Elementor Free & Pro Version
Wait! Before we dive into how to add custom fonts in Elementor, first, you should know about the font formats. There are three types of font formats mostly used for the web, which include:
- The Web Open Font Format (WOFF): The WOFF font format is specially optimized for web usage which provides better compatibility and faster loading times as compared to TTF and others.
- The Web Open Font Format WOFF2: This is the latest version of WOFF. WOFF2 offers even better compression compared to WOFF, resulting in smaller file sizes and faster loading times.
- TrueType Font (TTF): TTF fonts are also used on the web, but they may not offer the same level of optimization as WOFF or WOFF2.
Well, if you want to convert your TTF font to WOFF2 but don’t know how, don’t worry. Simply check out our article on Free Online Font Converter.
Okay, guys, here we will see how to add custom fonts to the Elementor free version and then to the paid version.
How To Add Custom Fonts To Elementor Free Version?
To add custom fonts in the Elementor free version, you need to install a plugin. One thing I want to tell you here is when you’re using the free version and you want some features, then you’ll need to install a plugin.
It means whenever you need to add a feature, you’ll need to install a plugin for that, and by doing this, it makes your website heavier and slower. This is the reason I recommend you if you can spend some money then purchase the Pro version of Elementor.
Anyway, if you are unable to spend money on the pro version, then don’t worry, simply use the following plugin to add custom fonts.
Firstly, you need to install and activate a plugin called Custom Fonts, it is developed by Brainstorm Force which is a well-known name in the WordPress industry.
This plugin is compatible with Elementor and other page builders as well. Moreover, it also works well without page builders. One of the best aspects of this plugin is that it supports almost all themes, regardless of whether you are using page builders or not.
Step 1: Once you install and activate the plugin, you will find the Custom Fonts option under the Appearance tab. Simply click on it.
Step 2: Now, a new page will open where you can see the “Add New Font” button. Just click on that.
Step 3: On this page, you can add your custom fonts by simply following the steps outlined in the image below.
This is how you can add your custom fonts in your Elementor free version. Once you’ll add custom fonts it will show you the same under Elementor’s typography settings.
Also Check: 3 Must Have WordPress Plugins For Free Elementor
How To Add Custom Fonts To Elementor Pro Version?
In this section, we will see the steps to add custom fonts to the Elementor paid version and here we don’t need to add any plugin.
Step 1: In the WordPress dashboard, you need to navigate to Elementor > Custom Fonts.
Step 2: Now, simply click on the “Add New” button located at the top.
Step 3: Here, you need to add your font name and then click on the “Add Font Variation” button.
Step 4: This is the last and final step. After clicking on the “Add Font Variation” button, you will see a page like the one in the image below. Here, you need to select your custom font weight, style, and upload the font file.
One thing to note is to upload your font according to the file format. For example, if you have a TTF file, you need to click on the upload button for the TTF file. I recommend using the WOFF2 file format because it is optimized for the web.
Once all these steps are done click on the Publish button. That’s it.
Once the font is added, it will be visible in every text-related widget, just like in the image below.
Bonus Tip🚀
If you’re using only custom fonts on your website, try disabling Google Fonts in Elementor. This can help make your website faster.
Now, you might be wondering how to do that, right? Well, don’t worry, I’ll show you how.
In the WordPress dashboard, simply navigate to Elementor > Settings > Advanced.
Once you’ve reached that page, just toggle the Google Fonts option to Disable it, and then click on the “Save Changes” button at the bottom. You’re all set!
Final Thoughts
After going through this guide, I hope it is now easier for you to add custom fonts to your Elementor website, whether it’s the Free or Pro version. I’ve done my best to provide step-by-step instructions to ensure that anyone can easily understand the process.
If you still have any doubts, feel free to ask by commenting below.
Found this article helpful? Sharing it can benefit others too.
