Site tool · Free
Upload your own font files to WordPress and choose them from Elementor's typography controls, including Elementor 4 atomic elements. Add every weight and italic, no Elementor Pro needed.
The short answer
Custom Fonts is an Animation Addons for Elementor extension that adds Elementor custom fonts without Elementor Pro. You upload font files in wp-admin, set each variant's weight and style, and the family appears in Elementor's typography controls, including atomic elements. Fonts are self-hosted and load only where used unless you make them global.
| Plan | Free |
|---|---|
| Type | Site tool (wp-admin screen) |
| Works on | Elementor's typography font list, for Elementor 4 atomic elements and classic widgets alike. Fonts appear in their own "animation-addon" group. |
| Main controls | Add New (the post title is the family name) · per variant: Font Weight (100–900), Style (Normal, Italic, Oblique), upload slots WOFF FILE, WOFF2 FILE, TTF FILE, OTF FILE, EOT FILE · Add New variant · Enable For Global · dashboard setting Load Head |
| Engine | Generates @font-face rules with font-display: swap from files in your Media Library |
| Editor preview | A preview line per variant in wp-admin; the canvas renders the font once selected. |
| Limits | Off by default on new installs: switch it on under Atomic Extensions. Files go through the WordPress Media Library, so a host or security plugin that blocks font file types will block the upload too. Each variant is one fixed weight and style; there is no variable-font axis control. Upload only fonts you are licensed to self-host. |
| Plugin version | Animation Addons for Elementor 4.3 · Last updated October 2026 |
Demo variations
Ideas you can build today with Custom Fonts, free in Animation Addons, on Elementor 4's own elements. The settings on each card are a good place to start.
A Lumen Dental homepage with headings in the brand's rounded sans at 600 and body copy at 400.
A Bakehouse & Co. menu page with a warm serif with a true italic for descriptions.
A Northwind Studio portfolio with oversized display headlines in a licensed grotesk and everything else in a system font.
A Paywise site where nav, buttons, pricing and footer use the app's UI font.
A Tally Notes site serving an open-licence font from its own domain, with no external font requests.
Features
Every point below is a real control in the Custom Fonts screen or part of how it works. Nothing here needs custom code.
Elementor's own Custom Fonts upload is part of Elementor Pro; this one comes with the free Animation Addons plugin.
Each family holds as many variants as you need, each with its own Font Weight and Style, so italic text uses the real italic file.
Fonts show up in Elementor's typography font list under their own group, for atomic elements and classic widgets alike. Set them in Elementor 4 classes and variables to update the site in one place.
By default, a font's @font-face rules print only on pages whose design uses it. Turn on Enable For Global for fonts used in headers and footers on every page.
Every rule uses font-display: swap, so text shows at once. Load Head prints the rules in the page head if your setup needs it.
Step by step
Six steps from switching it on to publishing. The bold names are the exact labels you will see on screen.
Download freeIn WordPress, go to Animation Addon › Settings › Extensions (the Atomic Extensions screen) and switch on Custom Fonts.
Open Animation Addon › Custom Fonts, click Add New and type the font family name as the title.
In Font Variant 1, choose the Font Weight and Style, then click Upload next to WOFF2 FILE (and WOFF or TTF if you have them).
Click Add New for each extra weight or italic, and switch on Enable For Global only if every page needs the font.
Publish the font post.
In Elementor 4, select an element, open Typography, pick your font from the "animation-addon" group and save.
Honest comparison
Hand-written @font-face rules in a child theme work, but the font doesn't appear in Elementor's font list.
| Need | Hand-coded @font-face | Animation Addons Custom Fonts |
|---|---|---|
| Upload files | FTP or Media Library, paths copied by hand | Upload buttons per format in wp-admin |
| Appears in Elementor's font list | No | Yes, in its own group |
| Weights and italics | One rule per variant, written by hand | Font Weight and Style per variant |
| Load only on pages that use it | No, unless you write conditional code | Yes, by default; Enable For Global for site-wide |
| font-display: swap | Only if you remember it | Always |
| Needs code | Yes | No |
Compared with Elementor 4.3.3 (September 2026). Elementor's own Custom Fonts feature is part of Elementor Pro and also supports variable fonts; Animation Addons Custom Fonts is free.
Who it's for
The people who get the most out of it, and what they use it for.
Applying each client's licensed brand font across many sites.
Keeping web typography identical to print.
Serving fonts from their own domain.
FAQ
Install the free Animation Addons plugin and switch on Custom Fonts in the Atomic Extensions screen. Go to Animation Addon › Custom Fonts, click Add New and type the family name. Set each variant's weight and style, upload the files and publish. The font then appears in Elementor's typography font list, in the "animation-addon" group.
Animation Addons Custom Fonts has upload slots for WOFF2, WOFF, TTF, OTF and EOT on every variant. WOFF2 is the smallest and works in all modern browsers, so one WOFF2 file per weight is usually enough. Files upload through the Media Library, so if WordPress says the file type is not permitted, ask your host to allow font uploads.
Yes. Animation Addons Custom Fonts adds your families to Elementor's font list, which the Elementor 4 atomic Typography control uses as well as classic widgets. Pick the font on a heading, paragraph or button, or set it in an Elementor 4 class or font variable so every element using that class follows.
Check three things in Animation Addons. First, Custom Fonts is switched on under Atomic Extensions. Second, the font post has a title, because that title is the family name. Third, at least one variant has a Font Weight selected and a file uploaded. Then reload the Elementor editor and look in the "animation-addon" group.
Animation Addons Custom Fonts prints a font's rules only on pages whose design uses it, unless you turn on Enable For Global. Each rule uses font-display: swap so text appears straight away. For best speed, upload WOFF2 files and only the weights you actually use, typically two or three per family.
Self-hosting removes the request to a third-party font host, the usual GDPR concern with hosted web fonts. Animation Addons Custom Fonts serves files from your own Media Library and domain. Check that your theme isn't still loading the same font from an external service.
Animation Addons Custom Fonts treats each variant as one fixed Font Weight and Style, so there are no controls for variable-font axes. For predictable results, upload static files, one per weight you need, such as 400, 600 and 700. If variable-font axes matter to you, Elementor Pro's own Custom Fonts covers them.
More answers in the FAQ · Documentation · Free vs Pro
Pairs well with
What works well with Custom Fonts on the same page or template.
Insert ready-made sections, then switch them to your brand font.
Animate headings set in your custom typeface.
Upload your own icon set the same way you upload fonts.
Display headlines that show off a custom font.
Set your brand font along a curve for badges and stamps.
Every weight and italic of your typeface in Elementor 4's typography controls, at no cost.
