Загрузка шрифтов в Gatsby

Development, Java | Amber | Комментировать запись

Правильный выбор шрифта может улучшить внешний вид сайта и пользовательский опыт. Однако стратегия загрузки шрифтов бывает задачей не из простых. Вот почему Gatsby предлагает разработчикам несколько удобных решений по загрузке шрифтов.

В этом мануале вы познакомитесь с тремя подходами к загрузке шрифтов в проект: мы рассмотрим Typography.js, Fontsource и ручное управление файлами.

Требования

• Локальная установка Node.js (следуйте этим инструкциям для mac OS, Ubuntu, Debian, CentOS).
• Предполагается, что вы работаете с уже существующим проектом Gatsby. Чтобы создать простой тестовый проект, читайте мануал Как создать первый сайт на Gatsby.

Это руководство было протестировано на версиях Node v15.13.0, npm v7.8.0, gatsby v3.2.1 и react v17.0.1.

Раздел, посвященный Typography.js, был проверен на версиях gatsby-plugin-typography v3.2.0, react-typography v0.16.19, typography v0.16.19 и typography-theme-lawton v0.16.19. Раздел о Fontsource проверен с помощью @fontsource/rubik v4.2.2.

Использование Typography.js

Typography.js – это набор инструментов для загрузки и настройки шрифтов для ваших проектов.

gatsby-plugin-typography должен также включать взаимозависимости typography and react-typography.

Для начала откройте окно терминала, перейдите в каталог проекта и выполните следующую команду:

npm install typography react-typography gatsby-plugin-typography

Примечание: Если у вашего дерева зависимостей возникает конфликт с последней версией React, gatsby-plugin-typography и react-typography, вы можете обойти эту ошибку – для этого нужно использовать флаг –legacy-peer-deps.

Откройте файл gatsby-config.js в редакторе кода и добавьте следующие новые строки кода:

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-plugin-typography",
      options: {
        pathToConfigModule: "src/utils/typography.js"
      }
    }
  ]
};

gatsby-plugin-typography поддерживает два аргумента:

• pathToConfigModule: это путь к конфигурационному файлу.
• omitGoogleFont: вспомогательная функция для запроса шрифтов Google из стандартного CDN. При значении true вы можете использовать альтернативную конфигурацию CDN.

После этого вам понадобится конфигурационный файл typography.js, указанный в параметре pathToConfigModule. В этом файле мы определим веб-шрифты, тему, а также любые дополнительные базовые стили.

Давайте добавим Playfair Display, Roboto и базовые размеры шрифтов.

import Typography from "typography";

const typography = new Typography({
  baseFontSize: "18px",
  baseLineHeight: 1.45,
  googleFonts: [
    {
      name: "Playfair Display",
      styles: ["800"],
    },
    {
      name: "Roboto",
      styles: ["400"]
    }
  ],
  headerFontFamily: ["Playfair Display", "serif"],
  bodyFontFamily: ["Roboto", "sans-serif"]
});

typography.injectStyles();

export default typography;

Сохраните изменения и просмотрите новые шрифты в своем проекте Gatsby.

Примечание: Если ваш стартовый пакет включает стили, они могут перезаписать стили, установленные с помощью gatsby-plugin-typography.

Typography.js также поддерживает предварительно определенные темы.

Давайте для примера рассмотрим тему Lawton, в которой для заголовков используется шрифт Raleway, а для основного текста – Libre Baskerville.

Откройте окно терминала и выполните следующую команду:

npm install typography-theme-lawton

Вот пример использования предопределенной темы в файле src/utils/typography.js:

import Typography from "typography";
import theme from "typography-theme-lawton";
const typography = new Typography(theme);
export default typography;

А вот так можно переопределить предопределенную тему с помощью overrideThemeStyles:

import Typography from "typography";
import theme from "typography-theme-lawton";

theme.overrideThemeStyles = () => ({
  a: {
    color: "black",
    textDecoration: "none",
    borderBottom: "2px solid gold"
  },

  "a:hover": {
    color: "black",
    textDecoration: "none",
    borderBottom: "2px solid gold"
  }
});

const typography = new Typography(theme);

export default typography;

Существует множество тем, которые можно использовать, и несколько вариантов конфигурации, чтобы получить правильную настройку для вашего сайта.

Теперь ваш проект Gatsby поддерживает Typography.js.

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

Fontsource – это набор инструментов для работы с self-hosted шрифтами с открытым исходным кодом. Преимущество self-hosted шрифтов – более быстрая загрузка по сравнению со шрифтами, размещенными на CDN.

Примечание: Иногда рекомендуют также использовать библиотеку Typefaces, но сейчас она считается устаревшей.

Рассмотрим для примера шрифт Rubik.

Откройте окно терминала и выполните следующую команду:

npm install @fontsource/rubik

Затем запросите шрифт в файле gatsby-browser.js, в котором вы взаимодействуете с клиентской стороной Gatsby.

require("@fontsource/rubik");

После чего вы можете вызвать шрифт в своей таблице стилей, src/styles/main.css:

body {
font: 400 18px Rubik, sans-serif;
}

Примечание: Для установки глобального стиля вам потребуется добавить в файл gatsby-browser.js строку импорта:

import "./src/styles/main.css"

Также шрифт можно вызвать в стилизованных компонентах, src/components/layout.js:

import { createGlobalStyle } from 'styled-components';

const GlobalStyles = createGlobalStyle`
body {
font: 400 18px Rubik, sans-serif;
}
`

const Layout = ({ children, location }) => (
// ...
<GlobalStyles />
<Main>{children}</Main>
// ...
);

export default Layout;

Теперь ваш проект Gatsby поддерживает Fontsource.

Управление self-hosted файлами вручную

Fontsource – это средство для self-hosting, которое предоставляет все необходимые файлы. Однако в некоторых ситуациях может потребоваться более точный контроль над настройкой: возможно, вы хотите получить больше преимуществ от CSS Font Loading API или же решите применить какие-нибудь стратегии загрузки шрифтов от Зака ​​Лезермана. В любом случае, вы всегда можете добавить шрифты на сайт Gatsby, как на любой другой веб-сайт.

Продолжим наш предыдущий пример со шрифтом Rubik. Вы можете создать каталог для файлов шрифтов и таблиц стилей:

|-- /static
  |-- /fonts
    |-- Rubik-Regular.woff
    |-- Rubik-Regular.woff2
    |-- Rubik-Italic.woff
    |-- Rubik-Italic.woff2
    |-- Rubik-Bold.woff
    |-- Rubik-Bold.woff2
    |-- fonts.css

А потом вы можете использовать плагин gatsby-source-filesystem для этого каталога (в gatsby-config.js):

module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "fonts",
        path: `${__dirname}/static/fonts/`
      }
    }
  ]
};

А в своей таблице стилей (src/fonts/fonts.css) для загрузки шрифтов вы можете использовать правило @font-face:

@font-face {
  font-family: Rubik;
  font-weight: 400;
  font-style: normal;
  src: url("Rubik.woff2") format("woff2"), url("Rubik.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  font-weight: 400;
  font-style: italic;
  src: url("Rubik-Italic.woff2") format("woff2"), url("Rubik-Italic.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: Rubik;
  font-weight: 700;
  font-style: normal;
  src: url("Rubik-Bold.woff2") format("woff2"), url("Rubik-Bold.woff") format("woff");
  font-display: swap;
}

И теперь вы можете вызывать свои шрифты так же, как в предыдущем примере Fontsource – через таблицу стилей или стилизованный компонент.

Заключение

В этом мануале вы познакомились с тремя различными подходами к загрузке шрифтов в проект Gatsby: Typography.js, Fontsource и управление файлами вручную.

Подобрав правильное средство, отвечающее потребностям вашего приложения, вы можете значительно улучшить производительность и удобство его использования.