Please ensure Javascript is enabled for purposes of website accessibility

How to Add Bunny.net Fonts to Elementor: A Step-by-Step Guide

Read Time: 6 minutes

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 bunny.net fonts come into play. This comprehensive guide will walk you through a step-by-step process of adding bunny.net fonts to your Elementor website and discuss why it’s a smart choice for web designers.

Why use Bunny.net Fonts?

Bunny.net is a popular content delivery network (CDN) that offers lightning-fast performance and a secure platform for delivering content across the globe. Bunny.net fonts provide an extensive collection of high-quality web fonts, ensuring your website looks great and runs smoothly. Some of the advantages of using bunny.net 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: Bunny.net prioritizes user privacy and is committed to protecting personal information.

Picking a Font from Bunny.net Fonts Library

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

  1. Visit https://fonts.bunny.net/ 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 Bunny.net Fonts to Elementor

Once you have picked a font from the Bunny.net 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 Bunny.net 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'] = 'Bunny.net Fonts';
    $fonts['Abel'] = 'Bunny.net Fonts';
    $fonts['Abhaya Libre'] = 'Bunny.net 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 bunny.net 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 Bunny.net Fonts Library. For our example fonts, the code would look like this:
@import url(https://fonts.bunny.net/css?family=abeezee:400,400i);

@import url(https://fonts.bunny.net/css?family=abel:400);

@import url(https://fonts.bunny.net/css?family=abhaya-libre:500,800);

5. Save your changes by clicking “Publish.”

How To Select Your Bunny.net 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 Bunny.net 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 bunny.net 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 bunny.net fonts you have added, reducing the number of external requests and potentially improving your site’s performance.

Conclusion

Typography is a critical aspect of web design, and choosing the right fonts can significantly affect your website’s appearance and performance. Using bunny.net 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 bunny.net 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 bunny.net fonts on my Elementor website?

Yes, you can use multiple bunny.net 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 bunny.net fonts affect my website’s performance?

Using a CDN like bunny.net 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 bunny.net fonts with other page builders besides Elementor?

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

Do I need a Bunny.net account to use bunny.net fonts?

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

Discover More

Start typing to see posts you are looking for.