You found the perfect font for your site, a distinctive display face for headings and a clean readable face for body text, and now you want to use it in Elementor. Then you open the typography settings and discover that the font is not there. Elementor free ships with a good set of Google Fonts, but it has no built in way to upload your own font files. That feature, called Custom Fonts, is locked behind Elementor Pro. The good news is that you can still add custom fonts in Elementor free, and this guide shows you how.
The free method uses a free plugin called Custom Fonts by Brainstorm Force, the team behind the Astra theme. It adds a font manager to your dashboard where you upload WOFF2 or TTF files, and those fonts then appear inside the Elementor editor alongside the built in Google Fonts. This guide covers the plugin setup, how to assign the fonts in Elementor, where to get free licensed fonts, and a CSS @font-face fallback.
Does Elementor free let me upload custom fonts?
Not on its own. Elementor Pro includes a Custom Fonts manager under Elementor, then Custom Fonts, where you upload font files and group them into font families. The free version of Elementor does not have that screen, and there is no hidden setting that turns it on. If you see a tutorial that tells you to open the Custom Fonts manager in free Elementor, that tutorial is showing the Pro version.
That does not mean you need to buy Pro. The free Custom Fonts plugin by Brainstorm Force adds the same kind of manager to any WordPress site, and Elementor free picks up the fonts it registers. The result feels almost identical to the Pro feature: you upload the files once, and the font appears in the typography dropdown in the editor. The only real difference is that the plugin manages fonts for the whole site, not only for Elementor, which is an advantage if you also want the font in your theme. If you are still deciding whether Pro is worth it, our Elementor free vs Pro comparison lays out every feature difference.
Where can I get free fonts I am allowed to use?
Before you upload anything, make sure you have the right to use the font on a website. Fonts are software, and they come with licenses. Using a font you downloaded from a random site can put you in breach of its license, even if the download was free. Stick to sources that clearly allow web use, and keep a note of where each font came from.
- Google Fonts at fonts.google.com: hundreds of free open licensed fonts, all safe for web use, and many already built into Elementor.
- Font Squirrel at fontsquirrel.com: free fonts cleared for commercial web use, with a webfont generator that converts files to WOFF2.
- The foundry or designer website: many type designers offer free weights for personal or commercial use, with the license stated on the download page.
Google Fonts is the best starting point, because every font there is open licensed and free for commercial use. You can download the files from Google Fonts and upload them to your own site, which keeps your site fast and private, because it no longer has to fetch fonts from Google servers on every visit. Font Squirrel is the best second source, especially for display fonts, and its webfont generator is useful when a font you own only comes as a TTF or OTF file. Download the WOFF2 version whenever it is available, because it is smaller and loads faster than TTF. Note that Elementor free already includes the full Google Fonts library, so check the typography dropdown first. Your font may already be there.
How do I add custom fonts with the Custom Fonts plugin?
First, install the plugin. Go to Plugins, then Add New, search for Custom Fonts, and look for the one by Brainstorm Force. Install it and activate it. A new menu item called Custom Fonts appears under Appearance in your dashboard. Open it and click Add New to create your first font family.
Give the font a clear name, exactly as you want it to appear in the Elementor dropdown. Then add the font files for each weight you need. A font family usually needs at least a regular weight and a bold weight, and often a medium or semibold weight too. Upload the WOFF2 file for each weight and set its weight value, for example 400 for regular and 700 for bold. If you only upload the regular weight and then set a heading to bold, the browser will fake the bold by thickening the regular letters, which looks worse than a real bold file.
Save the font family, then repeat the process for your second font, usually one for headings and one for body text. Two fonts are enough for most sites. A third font for accents or quotes is fine, but every extra font family adds download size and slows the first paint of the page. Pick your pair carefully, save them, and move on to the editor. If you need a refresher on how Elementor handles type across a whole site, read our guide to Elementor global colors and fonts explained.
How do I use the custom font inside Elementor?
Open any page with Elementor and click on a heading widget. In the Style tab, open the Typography section and click the font family dropdown. Your uploaded font should appear in the list under its family name. Select it, and the heading updates immediately in the editor. Set the weight to match a weight you uploaded, for example 700 if you uploaded a bold file.
Do not stop at one heading. The best way to use custom fonts is to set them once in Elementor Site Settings, so every heading and paragraph on the site uses them by default. Open the Site Settings from the hamburger menu in the editor, go to Typography, and set your heading font for all four heading levels and your body font for text. Every new widget you add will inherit those choices, and you will only override them when a specific design needs it.
If your font does not appear in the dropdown, the usual cause is a missing font file or a caching problem. Check that you saved the font family in the plugin and that each weight has a file attached. Then clear any caching plugin cache and reload the editor. If it still does not show, check that the file actually uploaded: some hosts block font file uploads by default, and you may need to ask your host to allow WOFF2 and TTF uploads.
Can I add a custom font with CSS @font-face instead?
Yes, and this is the right route if you want full control or you prefer not to add another plugin. The CSS @font-face rule tells the browser where to download a font file and what family name to give it. You upload the font file to your Media Library, then add the rule in the Customizer under Additional CSS or through a code snippet. The font then becomes available to any CSS on the site, including Elementor custom CSS on a widget.
@font-face {
font-family: 'VUTG Display';
src: url( '/wp-content/uploads/vutg-display.woff2' ) format( 'woff2' );
font-weight: 700;
font-style: normal;
font-display: swap;
}
.vutg-display-heading {
font-family: 'VUTG Display', sans-serif;
}The font-display swap line is important: it tells the browser to show a fallback font immediately and swap in your custom font when it finishes downloading, so visitors never stare at invisible text while the font loads. The font-family name in quotes is the name you will use anywhere you apply the font. One weakness of this route is that the font will not appear in the Elementor typography dropdown, because Elementor only lists fonts it knows about. You apply it by adding a CSS class to a widget and targeting that class in your Additional CSS. For the CSS basics behind this, read our guide to add custom CSS in WordPress.
What about Google Fonts already built into Elementor?
Elementor free already includes the full Google Fonts library, so for many sites there is nothing to upload at all. Open the typography dropdown on any widget and you can search hundreds of fonts by name. If the font you want is a Google Font, just select it and you are done. The font files load from Google servers by default, which adds an external request to every page and sends visitor data to Google.
If you care about speed or privacy, download that same Google Font and upload it through the Custom Fonts plugin instead, so the font is served from your own site. This is called self hosting, and it removes the external request entirely. The steps are the same as in the plugin section above: download the WOFF2 files from Google Fonts, upload them as a font family, and select the font in the editor. The visible result is identical, but the page loads the font from your server.
How do I keep custom fonts fast and reliable?
Fonts are render blocking resources, which means a slow font can delay the whole page. Keep the damage small with four habits. First, use WOFF2 files only, because they are the smallest modern format. Second, upload only the weights you actually use, since each weight is a separate download. Third, limit yourself to two font families, one for headings and one for body text. Fourth, use font-display swap in any @font-face rule.
Also set a sensible fallback stack. If your custom font fails to load, the browser should fall back to a similar system font rather than a random default. A serif display font should fall back to Georgia or a generic serif, and a clean sans font should fall back to system fonts or a generic sans-serif. Elementor handles fallbacks for fonts it lists, and in your own CSS you write the fallback after the custom family name, as in the @font-face example above. A fast font setup is one more part of a fast site, and our web hosting guide explains how your host affects loading speed too.
Frequently asked questions
Can I add custom fonts in Elementor free without Elementor Pro?
Yes. Install the free Custom Fonts plugin by Brainstorm Force, upload your WOFF2 or TTF files under Appearance, then Custom Fonts, and the fonts appear in the Elementor typography dropdown. You can also use a CSS @font-face rule if you prefer no extra plugin.
What font file format should I upload to WordPress?
WOFF2 is the best choice, because it is the smallest format and every modern browser supports it. TTF also works, but it is larger. If you only have a TTF or OTF file, convert it to WOFF2 with the free webfont generator on Font Squirrel before uploading.
Why is my custom font not showing in Elementor?
The usual causes are an unsaved font family in the plugin, a missing file for that weight, a caching plugin serving an old page, or a host that blocks font uploads. Check the font family is saved with files attached, clear all caches, reload the editor, and ask your host to allow WOFF2 uploads.
Are Google Fonts free for commercial websites?
Yes. Every font on Google Fonts is released under an open license that allows commercial use, including client websites. You can use them through Elementor directly or download the files and host them on your own server.
Last updated: November 2026.
