how-to-add-fonts-to-elementor

8 minutes

How to add fonts to Elementor

One of the things that people want here is the add fonts to Elementor feature. Using this, the user can add fonts. Well, there are many ways you can do it. We will cover the best ways for Elementor to add fonts. Elementor is one of the best builders you can use for creating an awesome page that you can have for your website. There are many great options from which you can change various things of the element. If you have added an element, there are more than enough options available for the editing and customization of that element.

How to change the font?

At first, it’s important to know that many people have no idea whether they can change the font in Elementor or not.

Well, there is an easy way to change the font in Elementor. We will talk about it here. If you already know how you can change the font here, you can directly proceed to the next step from which we will add the font.

To change the font in Elementor, you will have to first create an element. You can open any page in Elementor and then edit it. Now, you just need to take any element you want and start making the changes in it.

Elementor add fonts

As we are changing the text, we will take “heading” as the element here.

Once you have the element on the page, you can change the element’s font. For that, you will have to head over to the “Style” option. In the style option, you will find various settings that you can use here.

We will simply head over to the “Typography” option here. The typography has all the settings that you will need.

You will see the font-family option there. It will be set to default in most cases. You can click on it and it will open a bunch of fonts that you can use. These are the fonts that are already available in Elementor and you can start using them directly on your website. If you love any font from here, you can select it and start using it.

There is another option called “Custom font”, right? We will use that for Elementor add fonts feature.

What are Custom Fonts?

Elementor allows you to add custom fonts on their plugin. However, the biggest disadvantage is that you will have to pay for it. This feature is only available in the pro version of Elementor. So, if you want to add the custom fonts in Elementor, you will have to get the Pro version of Elementor.

It allows you to upload your font. The font can be downloaded from many websites. Many great websites allow you to have the fonts of your choice. You can download the fonts from there and then you can upload them on Elementor. This is how you can add fonts to Elementor.

We will see how you can change the custom font. Before that, many people might not want to pay for the pro version just because of the fonts, right? If that’s the case, we will also see a freeway using which you can Elementor add fonts directly. It will also support custom font. However, the features will be limited there.

At first, we will see the genuine and the right way.

Add fonts to Elementor using Pro version

You can always add the custom font using Elementor Pro. It’s not just for the custom font. When you upgrade to the pro version, there will be many features that you will get. You can create the header and footer from Elementor Pro. If you want to have a custom theme, you can also do that.

In the same way, some features allow you to create a popup and also allows you to import the best templates. There is a huge list of features that we can talk about here. However, we will mainly focus on the fonts here as that’s the main topic of the guide.

To start using the custom font, you will have to get Elementor pro. You can install the free version and then you can upgrade the Elementor from the plugin directly. It will give you the pro addons. You will have to install the pro addons as well.

Once all these things are ready, you are all set to add the custom font.

Get the Custom Fonts Ready

Before we see the method on how you can add the custom font, you will have to add the custom font. A simple Google search will give you enough results.

Some of the top websites that you can check out include DaFont, Fontspace, Adobe Typekit, etc. You can check out these websites and download the fonts from here.

Please note that don’t use Google font. Google font is already given in Elementor. So, if you want to use that, you can easily find it in Elementor. You don’t need to download the font for that.

There are five font types supported here.

  • The Web Open Font Format (WOFF)
  • The Web Open Font Format (WOFF 2.0)
  • TrueType Fonts (TTF)
  • SVG Fonts/Shapes
  • Embedded OpenType Fonts (EOT)

The recommended would be WOFF, WOFF 2.0, and if you can’t find it, you can also use TTF. Other than these, there might be problems in showing the font in certain browsers. So, it’s always better to use the recommended ones.

If you want to be unique and use the handwriting font or any other similar fonts, you can also use that here. Just keep the fonts ready and then head over to the next step.

Adding Custom Font

Now that you already have the font ready, we will upload it in Elementor.

You can open your WordPress dashboard. In the WordPress dashboard, you can open the Elementor and then click on the “Custom font”. Yes, when you upgrade to the paid version, it will have the custom font menu there. You can simply click on it and then it will display the fonts that are already uploaded.

As you are new here, there will be no fonts. You can click on Add fonts.

This is where you will have to enter the name of the font family and then you can upload the file.

Please note that you will have to enter the name of the family manually. This will be shown when you are selecting the font. So, it’s always a great choice to name it perfectly.

You will then see a bunch of options from which you can upload the file. There are many files that you can upload here. Depending on the file type, you can upload the file.

For instance, if the file type is TTF, you can upload it in the respective field type. We already saw which of the files are supported. So, you can use any of them.

Do the Settings

Before you save all the changes and start using the font, you can also do a few settings.

There will be an option for the weight of the fonts. You can set the weight from the top bar. When you are uploading the file, you will be asked to select the weight also. Further, there will be an option to select the style as well.

You can select both of these and then you can save the changes.

Don’t worry more about selecting the perfect option here. You can surely change all these things from the typography options in the Elementor panel. So, you can make the changes from there too.

Here, you can select the default options that you like. Thereafter, you can save the changes and your custom fonts are ready.

Using the Elementor Custom Fonts

Now, it’s time to select and use the custom fonts that we have selected.

For this, you can refer to our first section where we saw how you can change the font.

In the same panel, you will find the option for custom fonts. Inside the custom fonts heading, you will see the lines of the fonts that you have added. It might also show you the name of the font family instead of the custom font. So, you can surely check out the entire fonts family in the typography section. You will find all the options there. So, you can start using the Elementor add fonts from here.

Now, we will see one more way to Elementor add fonts.

How to add fonts in Elementor for free?

Like we have mentioned earlier, there are many ways you can Elementor add fonts. One of them is paid where we will use the pro version of Elementor. The next one is where we will use the free plugins.

We will now talk about the free plugins. There are two main plugins that we will talk about here. These are the free plugins from third-party developers. So, you are not using the official code from Elementor here.

You will have to install these plugins and then you can Elementor add fonts. So, many people prefer the official way instead of this. However, both of these plugins are in the official WordPress plugin directory. So, you can surely rely on that.

Let’s talk about the plugins.

Elementor add custom fonts

Custom Fonts plugin is by Brainstorm Force. It’s the same team of developers that developed the Astra theme which is one of the best themes for Elementor. There are many other plugins developed by them.

One of the greatest plugins they have for the fonts is this one. Custom Fonts allows you to add new fonts to your Elementor.

Currently, it has very limited support. It works perfectly well with Elementor, Beaver builder, and if you want to use it with a  theme, you can use it with the Astra theme. As it’s by the same developer, it will work perfectly well here.

The plugin allows you to add custom fonts. It has a very simple UI just like the WordPress default UI. So, you can easily start using the plugin. Once you install the plugin, you can head over to Appearance > Custom Fonts and then upload the fonts there.

It will then start showing at all the places. If you are using the Astra theme, you can also use it to change the fonts of the theme. You can easily find this plugin in the WordPress plugin directory. Just search for Custom Fonts and you will find this one. You can look for the developer’s name as Brainstorm Force.

Smart Fonts

The next plugin that you can use is also free. Smart Fonts is also available for free in the WordPress plugin directory. The full name of the plugin is Smart Fonts for Elementor. So, you can look for the same and you will find it here.

As it’s made especially for Elementor, it won’t work with other plugins or themes. It allows you to upload the file of the custom font and then you will be able to see the font in the Elementor.

To use this plugin, you can log in to your WordPress dashboard. In the WordPress dashboard, you will find the option of Smart fonts. In the smart fonts section, you will have to head over to settings. The settings option allows you to upload the font there. You can then start using the font.

Final Words

To conclude, this is how you can Elementor add fonts. We saw two ways to add the fonts. You can use any of them. For few people, the free method won’t work due to support issues. You can always try the free methods first and if it doesn’t work, you can upgrade to the Pro. The pro version will also give you the ability to make many more changes in Elementor. So, you can surely upgrade to the Pro version if you are using Elementor and want to get access to more things. You will unlock many features as well as there are many templates for Elementor which you can use. So, it’s worth upgrading.






0/5


(0 Reviews)

Alexey Seryapin

Alexey is a WordPress wizard with 10+ years of experience as a lead developer, He has launched 500+ WordPress websites and 100+ WooCommerce shops.

WEBSITE UP TO DATE & SECURE WordPress Maintenance Service

Save 17% with our Annual pricing plan.

Has your website been hacked?

WordPress Malware Removal Service

We will fix any WordPress hack and make your website hackproof.

Related Posts

how-to-add-product-variations-in-woocommerce

How to Add Product Variations in WooCommerce?

how-to-use-woocommerce-shipping-classes

How to Use WooCommerce Shipping Classes?

how-to-get-woocommerce-category-id

How to Get WooCommerce Category ID

how-to-get-woocommerce-product-id

How to Get WooCommerce Product ID