Google Fonts comes with enough fonts (typefaces, for sticklers) to start a new graphic design revolution every day, but what if your client insists on using some obscure font they found on a free font site?
Can you add custom fonts to WordPress using Elementor?
Yes you can.
There are two ways: you can either find a font that gives you web font variants or turn a desktop font into a web font and upload it to your WordPress website.
In this post I’ll show you step-by-step how to do it both ways.
The tools
These are the tools you’ll need to add custom fonts to your WordPress website:
- WordPress.
- This is the self-hosted version of WordPress, not wordpress.com.
- Page Builder Framework.
- Strictly speaking, you don’t need Page Builder Framework, but it works great with page builders like Elementor.
- Elementor Pro.
- You’ll need Elementor Pro for this tutorial.
- fontspring.com.
- Fontspring is a fantastic source for typefaces. We’ll use one of their free fonts for this tutorial.
- transfonter.org.
- This tool transmogrifies your fonts for use on your WordPress website.
This tutorial assumes two things:
- You’ve created a Fontspring account.
- You’re logged into your WordPress admin panel and can access your Elementor Pro admin dashboard.
Font requirements
You need the following font files to ensure your custom font displays correctly in as many browsers as possible:
- WOFF – Web Open Font Format, used by modern browsers.
- WOFF2 – Web Open Font Format 2, used by uber modern browsers.
- TTF – TrueType Fonts, allowing for better Safari, Android and iOS support.
- SVG – used by legacy iOS systems.
- EOT – Embedded OpenType, used by Internet Explorer 6 to Internet Explorer 9 browsers.
Fontspring gives you all of those formats, but I want to show you another tool that lets you create those files from fonts you don’t have all those variants for. In other words, if you only have a desktop font, this tool will create the necessary files for you.
Using web fonts
This is the quickest way to add a custom font to your website.
You simply find a great typeface on Fontspring, download the web font variant and upload the files to your website using Elementor.
This tutorial assumes you’re logged into your Fontspring account and you’ve found a font to your liking.
We’ll be installing Amerta Misty, a free script font available from Fontspring.
The only way you can download fonts—even free fonts—from Fontspring is to add them to a cart and go through checkout.
Let’s go.
Find a font
On the Fontspring website, in the search box in the header of the site, start typing the name of the font you’d like to use.
Since we’re using Amerta Misty, we type amert and Fontspring automagically finds the right font.


This opens the font’s landing page.
Buy the font (at no cost)

Choose the variants
Amerta Misty comes with desktop, web font, ebook and application variants, but since we only need it for a website, we’ll choose the Web Font variant.



Generate web font files
Now wait for the system to process your order, then click the Download button.


You’re presented with three options:
- Basic
- Standard
- Expert
The standard option is more than sufficient for our needs.


The difference between EOT Lite and EOT Compressed are negligible, and the Basic Subsetting setting is fine for our purpose.
Download your web fonts

Wait for the zip file containing your files to download. You’ll need to be able to find your files on your computer, so make sure you know where they download to.
Extract the font files
My Chrome browser downloads all files to my desktop, so I’ll find my zipped font folder there and simply extract my fonts.
For this step I use the freeware utility, 7-Zip. You might be using another program, which means the process might differ slightly for you.

When you choose 7-Zip’s Extract Here option, the files inside the zipped folder are dumped on your desktop. This is a problem if there are plenty of files. You might want to use the Extract files… option, which places the extracted files inside a folder on your desktop.
But since the Amerta Misty zipped folder doesn’t come with too many files I’ll dump it directly on my desktop.

Open Elementor Custom Fonts
As mentioned before, this tutorial assumes you’re logged into your WordPress dashboard.
Let’s add the custom font.

Add a new custom font
Now we’ll add the font.

Name the font
You can name the font anything you like, but it’s sensible to give it the name the creator gave it.

Add the font variations
Since none of the required font files are in your media library you’ll have to upload them all. We’ll do it one by one.


Add the WOFF file



Wait for the file to upload.

Add the WOFF2 file



Wait for the file to upload.

Add the TTF file



Wait for the file to upload.

Add the SVG file



Wait for the file to upload.

Add the EOT file



Wait for the file to upload.

Publish your custom font
All font files have been uploaded successfully. Now it’s time to publish the font.
You’ll find the publish button to the far right of the screen.

Using a desktop font
What if you’re not using Fontspring’s super simple way of creating web fonts for your website?
What if you come across a font on a random font website that only gives you a desktop font file?
If that’s the case you’ll need to create web fonts from that single file.
Once you’ve created the font files, you’ll download it to your computer, where’s it’s ready to be added to your Elementor-driven WordPress website using the steps outlined earlier in this tutorial.
Find a font
We’ll use a free 1001 Fonts font called Homoarakhn.
Visit 1001fonts.com/homoarakhn-font.html to download it.

Download the font
Look for the big download button.

This downloads a zip file containing the font to your computer.
Extract the font file
My Chrome downloads all files to my desktop, which means the zip file is on my desktop.
I use 7-Zip, so I’ll right-click the file, hover over the 7-Zip menu item and click on Extract Here.

This extracts the zipped folder’s contents to my desktop. One of the files is the actual font, while the other one is just a text file containing licensing information.
Now we’re going to create web fonts from this single desktop font.
Upload the font
We’ll be uploading the font file to a tool called transfonter, which we use to turn the font into all the web font files required to create a custom Elementor font.
Open transfonter
Visit transfonter.org.

Click Add fonts

Choose the file
My file’s on my desktop. Your’s might be elsewhere. Wherever it is, find it and upload it.


Create web font variants
When you first upload your custom font, the only setting that’s active is Family support.

We want to make the font as compatible as possible, so we’ll activate some of the other settings.

Convert the file
Now it’s time to convert your desktop font.

Wait for the conversion to complete.

You now have all the files you need to add a custom Elementor font.
Extract the font files
You want the files inside the zipped folder you just downloaded.
As stated before, my Chrome downloads files to my desktop, so I’ll find the file there and extract it.
I’m using 7-Zip for the extraction process.

This extracts all the fonts required for adding a custom font using Elementor, but it also extracts other files we won’t be using. Just ignore those. Once all the relevant files are uploaded you can delete everything.
Open Elementor Custom Fonts
The files are ready on the computer. Now it’s time to upload them to your WordPress website using Elementor.

Add a new custom font
You’ll notice the custom font we uploaded earlier, as well as a handy preview of the font.
Now we’ll add yet another custom font.

Give the font a name
As mentioned before, I like to give the font the original name the author gave it.

Add the font variations
We’ll add the required font files one by one. Strictly speaking, we don’t need to upload all the font variations, but if we don’t our font won’t display correctly on all devices. The point of uploading all the variations is to make the font compatible with as many devices as possible.

Add the WOFF file



Wait for the file to upload.

Add the WOFF2 file



Wait for the file to upload.

Add the TTF file



Wait for the file to upload.

Add the SVG file



Wait for the file to upload.

Add the EOT file



Wait for the file to upload.

Publish your custom font
All font files are in place. Let’s publish the font.

And that’s how you add a custom font to Elementor using a desktop font.
How to use a custom font
Now it’s time to display your custom font/s using Elementor Pro.
This can be done element-by-element or by setting global fonts.
We’ll do it both ways.
For this to work you need to have Elementor active for a WordPress page. Read my article on how to activate Elementor for a page if you’re not sure how to.
For a single element
Once you’ve activated Elementor you can continue with this step.
I’ve set up a page at test.minibigthing.com/font where you can see the results.

Add a heading
We’ll add a heading and change it to the script font we installed earlier.


The default heading text is a light blue color. That’s because we didn’t set any global colors. That can be tackled in another tutorial, but for now we’ll leave it as is.
Change the font family
Make sure the heading text element is still active before you take the next step.

You’ll notice a Typography setting with a little blue globe.





In this case, the heading is far too small. You can play with the size and other font elements, but we’ll leave that for another tutorial.
Using Elementor global font setting
The efficient way to handle fonts and colors in Elementor is to enable global settings.
For this section we’ll add another heading and change it to the second custom font we installed, using Elementor’s global settings.

Add a heading
We’ll add another heading below the current heading.

Change the heading level
We’re changing the heading level from H2 to H3. This is simply so we can see the change that occurs when we set a global font for H3.


Change the font family
Now we’ll change the font family for the H3 heading, but do so using Elementor Pro’s global settings.

Enter global settings
The following step takes you to Elementor’s global settings.



The box that pops open is exactly the same as the one that popped open when we edited the first heading.
The only difference is, any changes we make here will reflect on all H3 headings across the website.




Exit global settings
The next step takes us back to Elementor’s page-level builder.

View the fonts
It’s time to check what the fonts will look like to website visitors.
But there’s a problem.
If you’re running a fresh install of Elementor Pro you’ll notice the global font settings you applied to all H3 headings did not take effect.
That’s because there’s one more setting to activate.
Change Elementor’s global settings
Open your WordPress admin panel in a new browser tab. Once it’s open, take the next step.



Your two headings should now be sporting their new custom fonts.

In conclusion
There you have it: two ways to add custom fonts to your website using Elementor Pro.
It’s an elegant solution to use EXACTLY the font you want on your website, which could make your website stand out from the crowd.
In a future article I’ll tackle ways to add custom fonts to your WordPress website using a theme and a plugin for those who don’t use Elementor.
Sign up and stay tuned!