Использование пользовательских шрифтов

Это руководство покажет вам, как добавить веб-шрифты в ваш проект и использовать их в ваших компонентах.

Использование локального файла шрифта

Этот пример покажет, как добавить пользовательский шрифт, используя файл шрифта DistantGalaxy.woff.

Добавьте ваш файл шрифта в public/fonts/.
Добавьте следующее правило @font-face в ваш CSS. Это может быть в глобальном файле .css, который вы импортируете, в блоке <style is:global>, или в блоке <style> в конкретном макете или компоненте, где вы хотите использовать этот шрифт.
```
/* Зарегистрируйте пользовательское семейство шрифтов и сообщите браузеру, где его найти. */
@font-face {
  font-family: 'DistantGalaxy';
  src: url('/fonts/DistantGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
```
Используйте font-family из правила @font-face для стилизации элементов в вашем компоненте или макете. В этом примере заголовок <h1> будет иметь примененный пользовательский шрифт, в то время как параграф <p> - нет.
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>
```

Использование Fontsource

Проект Fontsource упрощает использование Google Fonts и других шрифтов с открытым исходным кодом. Он предоставляет npm-модули, которые вы можете установить для нужных вам шрифтов.

Найдите шрифт, который хотите использовать, в каталоге Fontsource. В этом примере будет использоваться Twinkle Star.
Установите пакет для выбранного вами шрифта.
- npm
- pnpm
- Yarn
Окно терминала
npm install @fontsource/twinkle-star
Окно терминала
pnpm add @fontsource/twinkle-star
Окно терминала
yarn add @fontsource/twinkle-star
Вы найдете правильное имя пакета в разделе “Быстрая установка” на странице каждого шрифта на сайте Fontsource. Оно начнется с @fontsource/, за которым следует название шрифта.
Импортируйте пакет шрифта в компонент, где хотите использовать шрифт. Обычно это нужно сделать в общем компоненте макета, чтобы шрифт был доступен на всем сайте.

Импорт автоматически добавит правила @font-face, необходимые для установки шрифта.
src/layouts/BaseLayout.astro
```
---
import '@fontsource/twinkle-star';
---
```
В качестве значения font-family используйте название шрифта, как показано в примере body на странице Fontsource. Это будет работать везде, где вы можете написать CSS в вашем проекте Astro.
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

Добавление шрифтов с Tailwind

Если вы используете интеграцию Tailwind, вы можете использовать любой из предыдущих методов на этой странице для установки вашего шрифта, с некоторыми изменениями. Вы можете либо добавить @font-face правило для локального шрифта, либо использовать стратегию импорта Fontsource для установки шрифта.

Чтобы добавить ваш шрифт в Tailwind:

Следуйте любому из приведенных выше руководств, но пропустите последний шаг добавления font-family в CSS.

Добавьте название шрифта в файл tailwind.config.mjs.

Этот пример добавляет шрифт Inter в стек шрифтов sans-serif, со шрифтами по умолчанию из 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: [],
}

Теперь весь текст sans-serif (по умолчанию в Tailwind) в вашем проекте будет использовать выбранный вами шрифт, а класс font-sans будет также применять шрифт Inter.

Дополнительные сведения см. в Документации Tailwind по добавлению пользовательских шрифтов.

Дополнительные ресурсы

Узнайте, как работают веб-шрифты, в Руководстве MDN по веб-шрифтам.
Сгенерируйте CSS для своего шрифта с помощью Font Squirrel’s Webfont Generator.

Внести свой вклад

Сообщество