--- title: "How to Add Custom Fonts to Elementor [2026]" url: https://theplusaddons.com/blog/add-custom-fonts-to-elementor/ date: 2024-01-04 modified: 2026-06-30 lang: en author: "Aditya Sharma" description: "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..." image: https://theplusaddons.com/wp-content/uploads/2023/11/How-to-Add-Custom-Fonts-to-Elementor-1024x536.jpg word_count: 1544 --- # How to Add Custom Fonts to Elementor [2026] ## - Elementor Pro allows users to upload custom fonts directly through the Custom Fonts feature. - Free users can utilize the Nexter Theme by POSIMYTH Innovations to add custom fonts to Elementor. - Custom fonts in Elementor support multiple formats including WOFF, WOFF 2.0, TTF, SVG, and EOT for full browser compatibility. - Adobe Typekit integration enables users to sync and use Adobe fonts within Elementor. - The Plus Addons for Elementor offers over 120 unique addons to enhance functionality and design options. 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. Table Of Contents ## 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**](https://theplusaddons.com/blog/best-elementor-fonts/)* ## 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**. ![Elementor Custom Fonts manager in WordPress dashboard showing Add New button](https://theplusaddons.com/wp-content/uploads/2023/11/Add-a-Custom-Font-to-Elementor.png)Elementor Custom Fonts manager in WordPress dashboard showing Add New button #### 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. ![Entering a custom font family name in Elementor Pro](https://theplusaddons.com/wp-content/uploads/2023/11/Custom-Font-1.png)Entering a custom font family name in Elementor Pro #### 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. ![Adding a font variation in Elementor Pro custom fonts](https://theplusaddons.com/wp-content/uploads/2023/11/Add-new-fonts-1.png)Adding a font variation in Elementor Pro custom fonts 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. ![Uploading font files in Elementor Pro custom fonts, WOFF, WOFF2, TTF, SVG, EOT](https://theplusaddons.com/wp-content/uploads/2023/11/Upload-fonts.png)Uploading font files in Elementor Pro custom fonts, WOFF, WOFF2, TTF, SVG, EOT Click **Add Font Variation** again to add additional weights (400 Regular, 700 Bold, etc.). Each weight needs its own file upload. ![Multiple font variations uploaded in Elementor Pro](https://theplusaddons.com/wp-content/uploads/2023/11/Add-new-fonts.png)Multiple font variations uploaded in Elementor Pro #### 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. ![Applying a custom font in Elementor](https://theplusaddons.com/wp-content/uploads/2023/11/Use-custom-fonts.png)Applying a custom font in Elementor's Typography settings panel ### Method 2: Nexter Extension (Free, Works Without Elementor Pro) [Nexter Extension by POSIMYTH](https://wordpress.org/plugins/nexter-extension/) 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](https://theplusaddons.com/wp-content/uploads/2024/01/Enable-Custom-Fonts-Upload-1024x429.png)Enable Custom Fonts Upload #### Step 3: Download Your Font Files Download the font you want from a free source. DaFont ([dafont.com](https://www.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. ![Downloading a free custom font from DaFont for use in Elementor](https://theplusaddons.com/wp-content/uploads/2023/11/Summer-dreams-sans.png)Downloading a free custom font from DaFont for use in Elementor #### 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](https://theplusaddons.com/wp-content/uploads/2024/01/Upload-Type.png)Upload Type #### 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. ![Selecting an uploaded custom font in Elementor](https://theplusaddons.com/wp-content/uploads/2023/11/Use-Custom-Font-on-Your-Website.png)Selecting an uploaded custom font in Elementor's Typography settings *Looking for the right theme to pair with your typography choices? See the [**5 Best Elementor Themes tested for speed and design flexibility**](https://theplusaddons.com/blog/best-elementor-themes/)* ## 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: https://youtu.be/vnAj7i5tXdU?si=bvCu_Fx060-4skuG 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**](https://theplusaddons.com/elementor-widgets/) here. Start building your dream website without coding! ![20+ Checklist for WordPress Site Maintenance eBook](https://theplusaddons.com/wp-content/uploads/2023/05/20-Checklist-for-WordPress-Site-Maintenance-1024x1024.jpg) ##### Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​ [contact-form-7] Field LabelSend Me the eBook ## 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](https://theplusaddons.com/elementor-widget/) by POSIMYTH, or [compare Free and Pro plans](https://theplusaddons.com/pricing/) to see what fits your project.