Оптимизация шрифтов

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

Google Web Fonts — популярный пример. Это библиотека веб-оптимизированных шрифтов в формате WOFF2, который обеспечивает хорошее сжатие.

Но есть нюансы: шрифт Google Web Font обычно весит 20–30 КБ. Если использовать несколько стилей и начертаний, получается 100–150 КБ — немало для сайта. Еще одна проблема — заметный сдвиг макета (layout shift) во время загрузки страницы.

В этом подразделе мы рассмотрим продвинутые техники, которые помогут ускорить ваш сайт и улучшить UX при использовании веб-шрифтов.

Основы

Прежде чем перейти к продвинутым техникам, давайте вспомним базовые рекомендации:

Используйте Google Web Fonts, когда это возможно.
Если вы используете пользовательский шрифт, постарайтесь пропустить его через Font Squirrel для лучшего сжатия и исправления вертикальной базовой линии.
Встраиваете шрифт вручную? Используйте WOFF2. Он поддерживается почти всеми браузерами (более 97%) и обеспечивает отличное сжатие.
Используйте <link rel="preload" href="/fonts/usual/usual-semi-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">, чтобы приоритизировать шрифт в очереди HTTP.
Убедитесь, что шрифт кэшируется с помощью cache-control: public, max-age=31536000, immutable. Если вы используете Vercel, Netlify или Gatsby Cloud, у вас, скорее всего, уже настроены хорошие политики кэширования.
Скачивайте и обслуживайте шрифт с того же CDN, что и ваш веб-сайт. Опять же, вы получаете это «из коробки» с Vercel, Netlify и Gatsby Cloud.

Приемы оптимизации

Готовы к следующему уровню? Вот несколько приемов, которые помогут вам уменьшить размер шрифтов, сделать их более привлекательными и улучшить UX:

Корректировка размера резервного шрифта
Пользовательская настройка набора символов
Исправления вертикальной базовой линии
Корректировка метрики резервного шрифта

Важно: пользовательские шрифты, которые не встроены в операционную систему, создают дополнительную нагрузку. Браузер не знает параметры шрифта, пока он не загружен, и использует резервный шрифт (например, Arial, Times New Roman) для расчета размера элементов с текстом. Когда шрифт загружается, размер пересчитывается, и это может привести к заметному сдвигу макета (layout shift), особенно при медленном интернете.

Этот пример сравнивает два шрифта — Times New Roman и пользовательский шрифт под названием Usual. Оба шрифта имеют размер 16px и межстрочный интервал 1.2, но обратите внимание на разницу в длине одного и того же текста.

Недавно были широко приняты новые свойства CSS для согласования метрик резервного и пользовательского шрифтов:

ascent-override
descent-override
line-gap-override

Это звучит здорово, но как правильно их настроить? Кэти Хемпениус и Кара Эриксон из команды Google Aurora создали алгоритм для этой задачи, но для достижения наилучших результатов необходимы автоматизированные решения. Команда Next.js недавно объявила о поддержке этих свойств в обновлённом пакете @next/font в версии 13. Наша команда приняла аналогичный подход и обернула этот алгоритм в CLI, который генерирует CSS для настройки метрик резервного шрифта; мы назвали его Fontpie.

github.com/pixel-point/fontpie →

Использовать его очень просто. Вот пример команды:

npx fontpie ./roboto-regular.woff2 --name Roboto

Ввод этой команды вернёт следующий CSS, который можно встроить в ваш проект, независимо от того, какой фреймворк или язык вы используете:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('roboto-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Times New Roman');
  ascent-override: 84.57%;
  descent-override: 22.25%;
  line-gap-override: 0%;
  size-adjust: 109.71%;
}

html {
  font-family: 'Roboto', 'Roboto Fallback';
}

Чтобы избежать сдвига макета при загрузке пользовательского шрифта, мы можем скорректировать размер резервного шрифта с помощью CSS.

Как это работает:

1. Объявляем новый шрифт (например, Roboto).

2. Объявляем другой шрифт (например, «Roboto Fallback») на основе локального шрифта (например, Times New Roman) и применяем к нему настройки метрики основного шрифта. Это полностью устраняет сдвиги макета.

Как видно на изображении, Times New Roman с настройками метрик теперь занимает столько же места, сколько и шрифт Usual.

Эта техника совместима со всеми современными браузерами, кроме Safari.

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

Подмножества шрифтов Google Web Fonts

Google Web Fonts предоставляет удобный API для создания подмножеств шрифтов. Рассмотрим пример с шрифтом Space Grotesk. Размер обычного начертания (400) в формате WOFF2 составляет 15 КБ. Встроенная ссылка будет выглядеть так:

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap" rel="stylesheet" />

Чтобы определить подмножество, достаточно добавить параметр &text к URL. Например:

<link
  href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap&text=HelloWorld"
  rel="stylesheet"
/>

Это особенно полезно, если у нас есть отдельный «стильный» заголовок, который использует другой шрифт по сравнению с остальной частью сайта. В этом случае мы можем определить подмножество, которое будет включать только символы, необходимые для этого заголовка. В приведенном выше примере настройка подмножества уменьшила размер шрифта до 1 КБ.

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

Если мы используем пользовательские шрифты (например, из Adobe Fonts), задача усложняется. Многие из них не оптимизированы для веба и содержат много ненужных символов, из-за чего их размер может легко достигать 30 КБ.

Font Squirrel — наш помощник, который позволяет легко создавать пользовательские подмножества шрифтов: просто загружаем шрифт в формате TTF или OTF, включаем режим «Expert» и настраиваем подмножество.

Создать подмножество просто: отмечаем нужные подмножества или вводим конкретные символы в поле «Single Characters». Например, символ © — это подмножество «Typographics», но если нам нужен только он, добавляем его в поле «Single Characters».

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

Еще одна возможная проблема при использовании пользовательских шрифтов (особенно плохо оптимизированных) — некорректная вертикальная базовая линия. Например, в некоторых шрифтах верхнее поле может быть меньше нижнего, даже если в CSS указаны одинаковые отступы.

Font Squirrel иногда автоматически исправляет эту проблему. Если нет, воспользуйтесь Custom Adjustments. Подбор правильной комбинации метрик может занять время, но это решит проблему.

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

Capsize — это библиотека, которая использует метаданные шрифта, позволяя задавать размер текста в соответствии с высотой прописных букв, убирая пространство над ними и под базовой линией. Она применяет CSS-правила с псевдоэлементами :before и :after, корректируя margin-top и margin-bottom, чтобы текст идеально вписался в контейнер и занимал всё пространство.

Пример результата:

// Для 48px
.css-dpa7xb::before {
  content: '';
  margin-bottom: -0.1432em;
  display: table;
}

.css-dpa7xb::after {
  content: '';
  margin-top: -0.2142em;
  display: table;
}

// Для 24px
.css-1m2jnlz::before {
  content: '';
  margin-bottom: -0.322em;
  display: table;
}

.css-1m2jnlz::after {
  content: '';
  margin-top: -0.393em;
  display: table;
}

Это удивительно простое в использовании решение, которое работает в 100% случаев.

Нам нужно только добавить CSS-код для каждого размера шрифта, используемого на странице.

Совет: сначала попробуйте автоисправления Font Squirrel, а затем, если нужно, подключайте Capsize.

Резюме

Настройка метрик резервного шрифта — простое и быстрое исправление, которое можно использовать в каждом проекте с помощью Fontpie или next/font.
Удаляем ненужные подмножества шрифтов, особенно если стильный шрифт используется только в разделе Hero для дизайна.
Следим за вертикальной базовой линией шрифта. Если нам приходится использовать разные значения отступов для верхней и нижней частей кнопки, чтобы текст выглядел выровненным по центру, — это сигнал, что базовую линию нужно исправить.

Ссылка на оригинал статьи — Advanced web font optimization techniques

Ссылка скопирована