Please ensure Javascript is enabled for purposes of website accessibility

How to Add Fonts to Elementor: A Step-by-Step Guide

Read Time: 6 minutes
The logo is adorned with stylish fonts.

Disclaimer: links may be affiliate links.

Table of Contents

Typography plays a significant role in your website’s overall look and feel. Selecting the right fonts can elevate your design and make your website more engaging and visually appealing. With so many fonts available, finding the perfect one for your website can be challenging. That’s where fonts come into play. This comprehensive guide will walk you through a step-by-step process of adding fonts to your Elementor website and discuss why it’s a smart choice for web designers.

Why use Fonts? is a popular content delivery network (CDN) that offers lightning-fast performance and a secure platform for delivering content across the globe. fonts provide an extensive collection of high-quality web fonts, ensuring your website looks great and runs smoothly. Some of the advantages of using fonts include:

  • Faster loading times: Using a CDN ensures that your web fonts load quickly, improving your website’s performance and user experience.
  • SEO benefits: Fast-loading fonts can lead to better search engine rankings.
  • Privacy: prioritizes user privacy and is committed to protecting personal information.

Picking a Font from Fonts Library

You can browse and select fonts from the Fonts Library without creating an account. To pick a font for your website, follow these steps:

  1. Visit and browse through the available fonts.
  2. Once you find a font you’d like to use, click on it to view additional information and the available styles.
  3. Copy the font’s CDN URL, which you will need later when adding to your Elementor website. This is located at the upper right with the “font +” button.

For this guide, we have selected the following example fonts:

  • Font 1: ABeeZee
  • Font 2: Abel
  • Font 3: Abhaya Libre

Adding Fonts to Elementor

Once you have picked a font from the Fonts Library, you can add it to your Elementor website using the Code Snippets plugin. Follow these steps:

  1. Install and activate the Code Snippets plugin from the WordPress plugin repository.
  2. Navigate to Snippets > Add New in your WordPress dashboard.
  3. Enter a title for your new snippet, such as “Add Fonts.”
  4. In the code editor, add the following code:
add_action('elementor/frontend/after_enqueue_styles', 'add_custom_bunny_net_fonts');

function add_custom_bunny_net_fonts() {
    wp_enqueue_style('custom-bunny-net-fonts', plugin_dir_url(__FILE__) . 'css/custom-bunny-net-fonts.css', array(), '1.0.0');

add_filter('elementor/fonts/additional_fonts', 'add_custom_fonts_to_elementor');

function add_custom_fonts_to_elementor($fonts) {
    $fonts['ABeeZee'] = ' Fonts';
    $fonts['Abel'] = ' Fonts';
    $fonts['Abhaya Libre'] = ' Fonts';
    return $fonts;
  1. Replace $fonts[‘ABeeZee’] with any other font names you would like to use.
  2. Save your changes and activate the snippet.

Next you need to add fonts to your Elementor website is by using the @import CSS method. To do this, follow these steps:

  1. Log in to your WordPress dashboard.
  2. Navigate to Appearance > Customize.
  3. Open the “Additional CSS” section.
  4. Add the @import code for your chosen font(s) from the Fonts Library. For our example fonts, the code would look like this:
@import url(,400i);

@import url(;

@import url(,800);

5. Save your changes by clicking “Publish.”

How To Select Your Fonts in Elementor

To select custom fonts within Elementor, follow these steps:

  1. Open the Elementor editor: Log in to your WordPress dashboard, navigate to the page or post you want to edit, and click “Edit with Elementor”.
  2. Select a text element: In the Elementor editor, click on any text element (e.g., Heading, Text Editor) to bring up the settings panel for that element.
  3. Access Typography settings: In the settings panel, look for the “Style” tab and click on it. Under the “Typography” section, you’ll find various settings related to the text element, such as font size, font family, font weight, and more.
  4. Choose a Font: Click on the “Family” dropdown menu under “Typography” to reveal the list of available fonts. Scroll down to the custom fonts section, and you should see the custom fonts you added using the code snippets provided earlier. Select one of your custom fonts from the list.
  5. Customize further: You can also adjust other typography settings, such as font size, weight, and style, to fine-tune the appearance of your text element.
  6. Save your changes: Once you’re satisfied with your font selection and customizations, click the “Update” button at the bottom of the Elementor editor to save your changes.

By following these steps, you can pick custom fonts for your text elements within the Elementor editor. Keep in mind that the custom fonts you added will only be available in the Elementor font selection dropdown if you have successfully implemented the previously provided code snippets.

Disabling Google Fonts in Elementor

If you want to use fonts on your Elementor website exclusively, you may wish to disable Google Fonts. To do this, follow these steps:

  1. Log in to your WordPress dashboard.
  2. Navigate to Elementor > Settings.
  3. Click on the “Advanced” tab.
  4. In the “Load Google Fonts” dropdown, select “Disable.”
  5. Save your changes by clicking “Save Changes.”

By disabling Google Fonts, you ensure that your website only uses the fonts you have added, reducing the number of external requests and potentially improving your site’s performance.


Typography is a critical aspect of web design, and choosing the right fonts can significantly affect your website’s appearance and performance. Using fonts with your Elementor website allows you to enjoy a wide range of high-quality fonts, faster loading times, and an improved user experience. With this step-by-step guide, you can easily add fonts to your Elementor website and enhance your site’s typography, setting your website apart from the competition.

Frequently Asked Questions (FAQs)

Can I use multiple fonts on my Elementor website?

Yes, you can use multiple fonts on your website. Simply add the @import CSS or theme function code for each font you want to use, and then apply the fonts to your website’s typography settings in Elementor.

Will using fonts affect my website’s performance?

Using a CDN like can improve your website’s performance, as it ensures that your web fonts load quickly for users around the globe. However, remember that using too many fonts can negatively impact your site’s load times, so choosing your fonts wisely and limiting the number of fonts used is essential.

Can I use fonts with other page builders besides Elementor?

Yes, you can use fonts with any page builder or WordPress theme that allows you to add custom fonts. The methods for adding fonts may vary slightly depending on your specific page builder or theme.

Do I need a account to use fonts?

No, you don’t need a account to access and use the fonts from the Fonts Library. Simply visit to browse and select the fonts you want to use on your website.

Empowering Your Digital Transformation
Modern and beautifully designed sites that are made for speed and performance with advanced security features by default. Fully Managed Hosting SSL, CDN, and LiteSpeed Enterprise WAF & DDoS Protection VIEW PLANS

Discover More

Start typing to see posts you are looking for.