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 Fonts in Tailwind CSS
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