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

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;
}

5. Replace $fonts[‘ABeeZee’] with any other font names you would like to use.
6. 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)