Пользовательские шрифты

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

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

В этом примере мы добавим шрифт с использованием файла DistantGalaxy.woff.

Поместите файл шрифта в папку public/fonts/.

Добавьте правило @font-face в ваш CSS. Это можно сделать в глобальном .css файле или блоке <style is:global>.

@font-face {
  font-family: 'DistantGalaxy';
  src: url('/fonts/DistantGalaxy.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

Используйте имя семейства шрифтов из правила @font-face для стилизации элементов:
src/pages/example.astro
```
<style>
h1 {
  font-family: 'DistantGalaxy', sans-serif;
}
</style>
```

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

Проект Fontsource упрощает использование Google Fonts и других открытых шрифтов.

Найдите нужный шрифт в каталоге Fontsource. Мы будем использовать Twinkle Star.
Установите пакет шрифта:
- npm
- pnpm
- Yarn
Окно терминала
npm install @fontsource/twinkle-star
Окно терминала
pnpm add @fontsource/twinkle-star
Окно терминала
yarn add @fontsource/twinkle-star
Импортируйте пакет в компоненте макета:
src/layouts/BaseLayout.astro
```
---
import '@fontsource/twinkle-star';
---
```
Используйте имя шрифта в CSS:
```
h1 {
  font-family: "Twinkle Star", cursive;
}
```

Регистрация шрифтов в Tailwind

Если вы используете Tailwind, вы можете зарегистрировать шрифт в файле src/styles/global.css:

@import 'tailwindcss';

@theme {
  --font-sans: 'Inter', 'sans-serif';
}

Теперь стандартный класс Tailwind font-sans будет использовать выбранный вами шрифт.