Пропустить до содержимого
Astro Astro

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

Astro поддерживает все распространенные методы добавления пользовательских шрифтов в дизайн вашего сайта. Это руководство продемонстрирует вам два различных варианта подключения веб-шрифтов в ваш проект.

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

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

Пример

Представим, что у вас есть файл шрифта DistantGalaxy.woff.

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

  2. Добавьте правило @font-face в ваш CSS. Это может быть глобальный .css файл, который вы импортируете, или блок <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 упрощает использование Google шрифтов и других шрифтов с открытым исходным кодом. Он предоставляет устанавливаемые npm модули для шрифтов, которых вы хотите использовать.

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

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

    Terminal window
    npm install @fontsource/twinkle-star

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

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

    src/layouts/BaseLayout.astro
    ---
    import '@fontsource/twinkle-star';
    ---

  4. Используйте свойство font-family как показано на странице Fontsource этого шрифта. Оно будет работать в любом месте, где вы можете написать CSS в вашем Astro проекте.

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

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

Если вы используете интеграцию с Tailwind (EN), вы можете добавить правило @font-face для вашего локального шрифта или использовать метод import из Fontsource для добавления шрифта.

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

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

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

    tailwind.config.cjs
    const defaultTheme = require("tailwindcss/defaultTheme");
    

    module.exports = {
      // ...
      theme: {
        extend: {
          fontFamily: {
            sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      // ...
    };

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

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

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

Узнайте, как работают веб-шрифты

Руководство по веб-шрифтам MDN познакомит вас с этой темой.

Создайте CSS для вашего шрифта

Генератор веб-шрифтов Font Squirrel может помочь подготовить ваши файлы шрифтов для вас.