How to Manage and Preload Local Fonts with Tailwind in Astro

(Updated: )
A @font-face illustration

Prerequisites

An Astro project with a Tailwind integration.

Downloading Assets

First, we got to grab a font. The most convenient way I’ve discovered is through google-webfonts-helper. Go there and download a font that you want. We are going to be using Open Sans as an example. Specifically the one with a .woff2 extension. Because it is the most compressed format with a wide support.

Create a fonts folder in your public directory. Extract your font there.

public
  fonts
    open-sans.woff2

Configuring Tailwind

By default, Astro is injecting Tailwind directives on every page. And we don’t have access to it. Let’s change it.

Open your astro.config.mjs and edit tailwind configuration.

integrations: [
  tailwind({ applyBaseStyles: false }),
],

Now we need to add tailwind and our local fonts into our main .css file. (If you don’t have one, create it in the src/styles/main.css)

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

@layer base {
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: block; /* This property will help us not flash unstyled text for a couple hundred milliseconds, and then it would act like font-display: swap */
    src: url('/fonts/open-sans.woff2') format('woff2');
  }
}

You want to make sure that this file is getting imported on every page you want to have it on. Put it into <Head /> or <Layout /> component. Also, you can import it on a page directly. Like this:

import '../styles/main.css'

For convenience we can add the font to tailwind.config.cjs

theme: {
  extend: {
    fontFamily: {
      opensans: ['"Open Sans"', 'sans-serif'],
    },
  },
},

And later use it like so:

<div class="font-opensans"></div>

Preloading the font

Add this <link> to the page where you are going to be using the font (for example index.astro) or you can add it to whatever component you want.

<head>
  <!-- rest of the head -->
  <link
    rel="preload"
    href="/fonts/open-sans.woff2"
    as="font"
    type="font/woff2"
    crossorigin
  />
</head>

That’s it

Now see your fonts load blazingly fast.