This guide will show you how to add web fonts to your project and use them in your components.

Using a local font file#

This example will demonstrate adding a custom font using the font file DistantGalaxy.woff.

Add your font file to public/fonts/.

Add the following @font-face statement to your CSS. This could be in a global .css file you import, a <style is:global> block, or a <style> block in a specific layout or component where you want to use this font.

/* Register your custom font family and tell the browser where to find it. */
@font-face {
    font-family: 'DistantGalaxy';
    src: url('/fonts/DistantGalaxy.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

Use the font-family value from the @font-face statement to style elements in your component or layout. In this example, the <h1> heading will have the custom font applied, while the paragraph <p> will not.

//The following code is located at "src/pages/..example.astro":
---
---
<h1>In a galaxy far, far away...</h1>

<p>Custom fonts make my headings much cooler!</p>

<style>
h1 {
    font-family: 'DistantGalaxy', sans-serif;
}
</style>

Using Fontsource#

The Fontsource project simplifies using Google Fonts and other open-source fonts. It provides npm modules you can install for the fonts you want to use.

Find the font you want to use in Fontsource’s catalog. This example will use Twinkle Star.
Install the package for your chosen font.
- npm
```
npm install @fontsource/twinkle-star
```
- pnpm
```
pnpm add @fontsource/twinkle-star
```
- Yarn
```
yarn add @fontsource/twinkle-star
```
TIP
You’ll find the correct package name in the “Quick Installation” section of each font page on Fontsource’s website. It will start with @fontsource/ or @fontsource-variable/ followed by the name of the font.
Import the font package in the component where you want to use the font. Usually, you will want to do this in a common layout component to make sure the font is available across your site.
The import will automatically add the necessary @font-face rules needed to set up the font.
```
//The following code is located at "src/layouts/Layout.astro":
---
import '@fontsource/twinkle-star';
---
```
Use the font’s name as shown in the body example on its Fontsource page as the font-family value. This will work anywhere you can write CSS in your Astro project.
```
h1 {
    font-family: "Twinkle Star", cursive;
}
```

Register fonts in Tailwind#

If you are using the Tailwind integration, you can use either of the previous methods on this page to install your font, with some modification. You can either add an @font-face statement for a local font or use Fontsource’s import strategy to install your font.

To register your font in Tailwind:

Follow either of the guides above, but skip the final step of adding font-family to your CSS.

Add the typeface name to tailwind.config.mjs.

This example adds Inter to the sans-serif font stack, with default fallback fonts from Tailwind CSS.

//The following code is located at "src/pages/tailwind.config.mjs":

import defaultTheme from 'tailwindcss/defaultTheme'

/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
    extend: {
    fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
    },
    },
},
plugins: [],
}

Now, all sans-serif text (the default with Tailwind) in your project will use your chosen font and the font-sans class will also apply the Inter font.

See Tailwind’s docs on adding custom font families for more information.

More resources#

Learn how web fonts work in MDN’s web fonts guide.
Generate CSS for your font with Font Squirrel’s Webfont Generator.