What are Elementor Custom Fonts and Supported Font Formats
When we hear the word “custom”, we all know that it signifies it was built just for you. Custom Elementor fonts are fonts that you can choose or upload to match the style of your website or your specific brand, especially if you want to create something that can be called a signature of your brand. These fonts let you do more. You can adjust how your text looks, change its style, and make it fit your brand better than regular default fonts. Elementor supports five different font formats that you can use.
- WOFF 1.0:It is the most recommended one because it works great on modern browsers.
- WOFF 2.0:It is an improved version of WOFF 1.0 that loads faster and takes less space.
- TTF:This one is a popular font format that has been used for many years and was developed by Apple and Microsoft in the 1980s.
- SVG fonts:These ones are helpful if you want to support older iPhone devices.
- EOT fonts:These ones are mainly used for old versions of Internet Explorer.
Keep in mind that the European Union has added new rules to the GDPR. If a website uses Google Fonts directly from Google’s servers, it could infringe these restrictions and have to pay a fine of up to 100 euros. You can bypass this difficulty by storing Google Fonts on your own website you can use them or your own custom fonts. You can also use a plugin like Perfmatters to host Google Fonts locally in WordPress without breaking GDPR laws.
Where to Get Free Custom Fonts:
Before digging into how to add custom font in WordPress Elementor, you must know that if you want to create custom fonts, you must keep in mind that creating custom fonts from scratch needs many technical skills. You must know typography, know how to use design software, handle font files, manage licensing, and work with coding and automation as well, all in one. If you are a no-code user or you don’t know any of them, learning all this can be difficult and time-consuming. Instead, it’s better and easier to use ready-made free or paid fonts. There are many trusted websites where you can find beautiful and high-quality fonts. Some popular ones are:
- Google Fonts
- DaFont
- Font Squirrel
- FontSpace
- Open Foundry
Adding Custom Fonts to Elementor: Free vs Pro
Adding custom fonts in Elementor is not the same in the free and premium Elementor versions. The truth is that the Elementor Custom Fonts works better when you are a premium user, as it offers a built-in feature for custom fonts. But no worries if you are a free user. You can still add custom fonts to the Elementor free version in some other ways, like using an additional plugin, or you can hire some WordPress development services. All these things are explained below in steps.
How to Add Custom Fonts in Elementor Free
There are many plugins that will help you add custom fonts to your WordPress website. But a few of the popular options are custom fonts and custom Typekit fonts. In the given method, we are going to use the Custom Fonts plugin because it is easy to use.
Step 01: Install and Activate the Custom Fonts Plugin
First of all, what you need to do is go to Plugins > Add New in your WordPress dashboard. In the search box, type Custom Fonts. When the plugin appears, click Install, then Activate it.
After activation, go to Appearance in the dashboard. What you will see is a new option called Custom Fonts. Click on it and then press the Add New Font button.
Step 02: Upload the Font and Save It
Now, you need to select the Local Fonts tab. Click the Choose File button and upload the font file from your computer. But you need to make sure the font file is in .ttf format. After uploading it, give your font a name so you can find it easily later. You can also add more font styles if you want to, like bold or light, whatever you want. A preview will appear on the side. Once everything looks good, click the Save Font button.
Step 03: Check the Font in Elementor
Next, you have to open any post or page using Elementor. Drag and drop a Heading or Text Editor widget and add some text in it. Go to the Style tab, then open Typography. Click on the Font Family dropdown and search for the font name you added.
If you see your font in the list of fonts, that means it’s working correctly. This is how you can add custom fonts to Elementor Free using the Custom Fonts plugin. The steps for the Custom Typekit Fonts plugin are almost the same.
How to Add Custom Fonts in Elementor Pro
If you have Elementor Pro installed and activated on your website, that’s great news. The Custom Fonts feature only works in the premium version. Once that is ready, you can start adding your custom fonts easily.
Step 01: Add a Custom Font in Elementor
First, what you need to do is go to Elementor > Custom Fonts in your WordPress dashboard. Here, you can create a new custom font. Click the Add New button to start. Now, give your font a name so you can easily recognise it later. After that, click on Add Font Variation.
Step 02: Upload Font Files and Set Variations
This section makes everything easier for you; you can adjust font settings like font weight and style. Click the Upload button and select a TTF font file from your computer. But make sure your font files are already saved on your device before uploading them. Once the upload is complete, you will see the font details on the screen.
If you want to add more styles, such as light or bold, click Add Font Variation again. Choose the font weight (for example, 100) and upload the matching font file. You can repeat this step for different font styles if needed.
Step 03: Publish the Custom Font
After adding all the font variations, click the Publish button. Your custom font is now saved and ready to use on your website.
Step 04: Use the Custom Font in Elementor
Now, open any page in Elementor. Drag and drop a heading or Text widget into the editor. Go to the Style tab, then open Typography. In the font list, you will see the custom font you just added. Select it to apply the font to your text. You can also adjust other typography settings like font size, weight, style, spacing, and decoration to make your text look more attractive.
A well-designed heading always grabs attention. If you want to make your text even more eye-catching, the next section shows how to style your headings using the Happy Addons Animated Text widget.
End Words:
Hope you have now got the answer and way of how to add a custom font in WordPress Elementor, so now you can easily create some custom web layouts, which can enhance your brand visibility as well. We hope this blog has helped you out with all the queries related to custom fonts in WordPress Elementor. If you have any queries related to WordPress contact us and let us answer them for you.
