👍 Google Fonts CDN

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

With more than 50 million websites using Google Fonts, there is an extremely high chance that a web user already has the font in their browser cache; reducing the need for an additional asset to be downloaded, saving bandwidth and increasing your performance.

Steps for Google Font in Tailwind

Step 1: Generate Google Font <link>

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

Step 2: Include Google Font 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.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,700;1,400&display=swap" rel="stylesheet"> 
    </head>

    ...

Step 3: Configure Google Font 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 Google Font 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