Adding fonts to Astro with Tailwind CSS

Prerequisites

• @astrojs/tailwind
• A @fontsource font of your choice

Layout Configuration

// layouts/YourLayout.astro

import "@fontsource/source-sans-3";
import "@fontsource/roboto";

global.css Configuration

/* global.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    font-family: "Source Sans 3", Roboto, system-ui, sans-serif;
  }
}