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

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

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

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

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

1. Добавьте ваш файл шрифта в public/fonts/.

2. Добавьте следующее правило @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;
   }

3. Используйте 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

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

1. Найдите шрифт, который хотите использовать, в каталоге Fontsource. В этом примере будет использоваться Twinkle Star.

2. Установите пакет для выбранного вами шрифта.

   npm

   npm install @fontsource/twinkle-star

   pnpm

   pnpm add @fontsource/twinkle-star

   Yarn

   yarn add @fontsource/twinkle-star

   Знали ли вы?

   Вы найдете правильное имя пакета в разделе “Быстрая установка” на странице каждого шрифта на сайте Fontsource. Оно начнется с @fontsource/, за которым следует название шрифта.

3. Импортируйте пакет шрифта в компонент, где хотите использовать шрифт. Обычно это нужно сделать в общем компоненте макета, чтобы шрифт был доступен на всем сайте.

   Импорт автоматически добавит правила @font-face, необходимые для установки шрифта.

   src/layouts/BaseLayout.astro

   ---
   import '@fontsource/twinkle-star';
   ---

4. В качестве значения font-family используйте название шрифта, как показано в примере body на странице Fontsource. Это будет работать везде, где вы можете написать CSS в вашем проекте Astro.

   h1 {
     font-family: "Twinkle Star", cursive;
   }

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

Заголовок раздела Добавление шрифтов с Tailwind

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

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

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

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

   Этот пример добавляет шрифт Inter в стек шрифтов sans-serif, со шрифтами по умолчанию из Tailwind CSS.

   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: [],
   }

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

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

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

Заголовок раздела Дополнительные ресурсы

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