👍 Bunny Fonts (GDPR Friendly) CDN

In this instance, we are going to be importing the font directly from Bunny via their <link> URL for your website or application development.

The Bunny Fonts API was designed to be fully compatible with the Bunny Fonts CSS v1 API, making the switch as easy as changing the hostname. Bunny Fonts are hosted by BunnyWay d.o.o. – an EU-based company – and were designed to help you stay fully GDPR compliant. No data or logs are ever collected or passed to a third party.

Steps for Bunny Fonts in Tailwind

Step 1: Generate the Bunny Font <link>

Find your font and select the styles that you wish to use within https://fonts.bunny.net.

Step 2: Include Bunny Fonts in <head>

Copy the Font <link> content and place it with the <head> of your DOM.

<!DOCTYPE html>

<html lang="en">
    <head>
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css2?family=Libre+Baskerville:ital,wght@0,700;1,400&display=swap" rel="stylesheet"> 
    </head>

    ...

Step 3: Configure Bunny Fonts in Tailwind CSS

Extend your tailwind.config.js with the font-family config. 

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        libre: ['"Libre Baskerville"', ...defaultTheme.fontFamily.sans]
      }
    }
  },
}

🏁 You can then start using your new font throughout your site.

<h1 class="font-libre">Libre Baskerville Font Header</h1>

Tip: Create a Tailwind CSS Font Fallback

Create a Fallback for your Bunny Fonts in Tailwind CSS by including the defaultTheme.fontFamily.sans – it’s a good practice to get in the habit with in the case that the display system encounters a character that is not available.

More details on how to set up your tailwind.config.js file can be found here: https://tailwindcss.com/docs/font-family