Using custom fonts

本頁內容尚未翻譯。

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.
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
- pnpm
- Yarn
Terminal window
npm install @fontsource/twinkle-star
Terminal window
pnpm add @fontsource/twinkle-star
Terminal window
yarn add @fontsource/twinkle-star
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.
src/layouts/BaseLayout.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;
}
```

To optimize your website’s rendering times, you may want to preload fonts that are essential for the initial page display. See the Fontsource guide to preloading fonts for more information and usage.

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.

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.

Contribute

Community