使用自定义字体

本指南将向你展示如何将网络字体添加到你的项目并在你的组件中使用它们。

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

使用本地字体文件

¥Using a local font file

此示例将演示如何使用字体文件 DistantGalaxy.woff.h 添加自定义字体。

¥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

字体源项目简化了 Google Fonts 和其他开源字体的使用。它提供了 npm 模块，你可以为要使用的字体安装。

¥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;
}
```

要优化网站的渲染时间，你可能需要预加载初始页面显示所必需的字体。有关更多信息和用法，请参阅 Fontsource 字体预加载指南。

¥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.

在 Tailwind 中注册字体

¥Register fonts in Tailwind

如果你使用 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 安装字体。

¥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.

要在 Tailwind 中注册你的字体：

¥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.

请参阅 Tailwind 关于添加自定义字体系列的文档了解更多信息。

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

使用自定义字体

使用本地字体文件

使用字体源

在 Tailwind 中注册字体

更多资源