If you want to add custom fonts to Elementor, you have two reliable methods depending on whether you use Elementor Pro or the free version.
Elementor’s built-in Google Fonts library covers hundreds of typefaces, but not every brand font, premium typeface, or specialty display font. When your design calls for a specific font that isn’t available by default, you need to upload it yourself. Your typography is one of the first things visitors register about your site, often before they read a single word.
This guide covers both methods: Elementor Pro’s built-in Custom Fonts feature and Nexter Extension, a free plugin by POSIMYTH that works without Elementor Pro. All steps were verified in May 2026 on WordPress 6.9.4, Elementor Pro v4.0.3, and Nexter Extension v4.6.7.
What Are Custom Fonts in Elementor?
Custom fonts in Elementor are self-hosted typefaces you upload directly to WordPress, making them available as font choices inside Elementor’s Typography settings, just like Google Fonts, but for any font file you own.
Self-hosting fonts has two practical benefits. First, your page doesn’t make an external request to Google’s servers, which reduces load time and eliminates GDPR concerns tied to Google’s CDN. Second, your brand typography stays consistent even if a font is removed from the Google Fonts library.
Where to Download Free Custom Fonts
These sources offer free fonts for personal and commercial use:
- Google Fonts (fonts.google.com), open-source font families, free to download and self-host
- DaFont (dafont.com), large collection of display and decorative fonts
- Font Squirrel (fontsquirrel.com), curated fonts with verified commercial licenses
- Fontspace (fontspace.com), 150,000+ free fonts with license details per font
Download your chosen font, unzip the folder, and select the WOFF2 file for best performance. Keep the TTF as a fallback if your method requires it.
Choosing the right typeface for your site? Browse the top Elementor fonts and when to use each one
How to Add Custom Fonts to Elementor [Step-by-Step Methods]
Both methods below add your font to the Elementor Typography picker. The result is the same, the difference is whether you have Elementor Pro.
Method 1: Elementor Pro Built-In Custom Fonts
Elementor Pro includes a Custom Fonts manager built directly into the WordPress dashboard. In our testing on WordPress 6.9.4, uploaded fonts appear in the Elementor Typography font picker immediately after publishing, no page reload or cache clear required. This feature requires an active Elementor Pro license.
Step 1: Open the Custom Fonts Manager
In your WordPress dashboard, navigate to Elementor > Custom Fonts > Add New.
Step 2: Enter a Font Family Name
Enter a name for your font family. This is the label that appears in Elementor’s font picker. Use a clear name that describes the font, for example, “Brand Heading Font” or the font’s actual name. We use “Custom Font 1” in this example.
Step 3: Add Font Variations and Upload Files
Click Add Font Variation. For each variation (regular, bold, italic, bold-italic), select the font weight and style from the dropdowns, then upload the corresponding font file.
Upload at minimum WOFF2 (smallest file size, supported by all modern browsers) and TTF (fallback for older systems). Upload EOT and SVG only if you need Internet Explorer or older iOS support.
Click Add Font Variation again to add additional weights (400 Regular, 700 Bold, etc.). Each weight needs its own file upload.
Step 4: Publish and Apply the Font
Click Publish. Open any page in the Elementor editor, select a text widget, and go to Style > Typography. Your custom font appears in the font family list alongside Google Fonts. Select it to apply, then adjust size, weight, letter spacing, and line height as needed.
Method 2: Nexter Extension (Free, Works Without Elementor Pro)
Nexter Extension by POSIMYTH is a free, standalone WordPress plugin with a Custom Font Uploads feature. It works with any WordPress theme, you do not need the Nexter Theme installed. According to WordPress.org, Nexter Extension has 10,000+ active installs as of May 2026. The Custom Font Uploads feature accepts WOFF2, TTF, and variable font files.
Step 1: Install and Activate Nexter Extension
In your WordPress dashboard, go to Plugins > Add New Plugin. Search for “Nexter Extension”, click Install Now, then Activate. This is a plugin, not a theme, so install it from the Plugins screen, not Appearance.
Step 2: Enable Custom Font Upload
After activation, go to Nexter > Extensions in your WordPress dashboard. Find the Utilities section, locate Custom Fonts Upload, and toggle it on.
![Enable custom fonts upload how to add custom fonts to elementor [2026] from the plus addons for elementor](https://theplusaddons.com/wp-content/uploads/2024/01/Enable-Custom-Fonts-Upload-1024x429.png "Enable Custom Fonts Upload | The Plus Addons for Elementor")
Step 3: Download Your Font Files
Download the font you want from a free source. DaFont (dafont.com) has a large selection of display, script, and decorative fonts. Find a font that matches your design, hit Download, and extract the zip file to your computer.
Step 4: Upload the Font to WordPress
In the Nexter Extensions panel, click the gear icon (⚙) next to Custom Fonts Upload to open the upload interface. Choose your upload method:
- Simple Font Upload, upload individual files per weight/style variation (one file per upload)
- Variable Font Upload, upload a single variable font file that contains all weight variations
For Simple Font Upload: enter the font name (eg, Summer Dream), select the weight (Regular, Bold, etc.), upload your WOFF2 or TTF file, and click Save Font.
![Upload type how to add custom fonts to elementor [2026] from the plus addons for elementor](https://theplusaddons.com/wp-content/uploads/2024/01/Upload-Type.png "Upload Type | The Plus Addons for Elementor")
Step 5: Apply the Font in Elementor
Open any Elementor page for editing. Select a text widget and go to Style > Typography. Your uploaded font now appears in the font family picker. Select it to apply. From the same Typography panel, you can adjust size, weight, letter spacing, and line height.
Looking for the right theme to pair with your typography choices? See the 5 Best Elementor Themes tested for speed and design flexibility
How to Add Adobe Fonts to Elementor
Adobe Fonts (formerly Adobe Typekit) gives you access to thousands of professional typefaces included with any active Adobe Creative Cloud subscription. Nexter Extension includes an Adobe Fonts Integration feature that connects your Adobe Fonts project directly to WordPress.
Here’s a quick video walkthrough of adding Adobe Fonts to your Elementor site:
To connect Adobe Fonts via Nexter Extension: go to Nexter > Extensions > Utilities, enable Adobe Fonts Integration, and enter your Adobe Fonts Project ID. Your Project ID is generated in the Adobe Fonts dashboard when you create a Web Project from your chosen fonts. Once saved, those fonts load on your site and appear in Elementor’s Typography font picker.
Why Are My Custom Fonts Not Showing in Elementor?
If your uploaded font doesn’t appear in Elementor’s Typography panel or doesn’t render on the frontend, one of these causes is likely responsible. Based on common support cases, caching and missing font weight variations account for most issues.
| Issue | Likely Cause | Fix |
|---|---|---|
| Font missing from font picker | Upload not saved or feature not enabled | Re-save the font; confirm the Custom Fonts Upload toggle is on in Nexter Extensions |
| Font in picker but not rendering | Uploaded weight doesn’t match the weight applied | Upload the font file for the exact weight set in Elementor’s Typography panel |
| Renders in editor but not on frontend | Caching plugin serving stale CSS | Purge all caches, plugin cache, Cloudflare/CDN cache, and server-level cache |
| Font looks different than expected | Wrong weight selected in Typography | Check the font weight dropdown in Elementor’s Typography settings |
| HTTPS warning in browser console | Font URL has wrong protocol | Update WordPress Address and Site Address in Settings > General to HTTPS |
Cloudflare users: if you have a “Cache Everything” page rule active, custom font CSS may be cached before your font was uploaded. Purge the Cloudflare cache after any new font upload to force the updated stylesheet to load.
Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!
![20 checklist for wordpress site maintenance how to add custom fonts to elementor [2026] from the plus addons for elementor](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg "20 Checklist for WordPress Site Maintenance | The Plus Addons for Elementor")
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance.
Which Method Should You Use?
Both methods deliver the same end result, your font available inside Elementor’s Typography picker. The right choice depends on your current setup:
| Your Situation | Best Method |
|---|---|
| You have an active Elementor Pro license | Method 1, no extra plugin needed |
| You use Elementor Free | Method 2, Nexter Extension (free) |
| You need variable font file support | Method 2, Nexter Extension supports variable fonts |
| You need legacy browser support (EOT, SVG) | Method 1, Elementor Pro supports all 5 formats |
| You want Adobe Fonts / Typekit integration | Method 2, Nexter Extension has built-in Adobe Fonts Integration |
| You manage multiple client sites on different themes | Method 2, works with any theme, standalone plugin |
In our testing across both methods on WordPress 6.9.4, uploaded fonts appeared in the Elementor Typography picker without any additional CSS configuration. If you’re already running Nexter Extension for its performance or security features, enabling Custom Font Uploads adds zero overhead, it’s one toggle in the same dashboard.
Nexter Extension’s Self-Host Google Fonts feature also solves a related need: it downloads your Google Fonts to your own server and serves them locally, eliminating the external Google CDN request and making your site GDPR-compliant for EU visitors.
To extend what’s possible with your Elementor setup beyond fonts, explore the 120+ widgets in The Plus Addons for Elementor by POSIMYTH, or compare Free and Pro plans to see what fits your project.
