Веб‑шрифты в Next.js — локально и через CDN

Крупный план текста на обложке книги

К чему стремиться

Минимизировать время рендера текста (FOUT/FOIT).
Обеспечить кросс‑браузерную поддержку нужных форматов (.woff/.woff2, при необходимости .ttf/.eot).
Соблюдать лицензию шрифта и требования конфиденциальности.

Использование локально хранимых шрифтов в Next.js

Когда хранить шрифт локально:

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

Шаги внедрения:

Скачайте файлы шрифтов (проверьте лицензию). Сайты с бесплатными шрифтами: Google Fonts, Fontspace, Dafont — но лицензии различаются.
Конвертируйте шрифты в форматы для веба. Современные браузеры поддерживают .woff2 и .woff; для старых — .ttf и .eot. Используйте проверенные конвертеры или gulp/webpack‑плагины.
Создайте папку fonts в корне проекта и положите туда файлы.
Зарегистрируйте шрифты в глобальном CSS (например, styles/global.css) через правило @font-face.

Пример определения @font-face для жирного начертания шрифта “Mermaid”:

@font-face {
  font-family: 'Mermaid';
  src: url('/fonts/Mermaid-Bold.eot');
  src: url('/fonts/Mermaid-Bold.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Mermaid-Bold.woff2') format('woff2'),
       url('/fonts/Mermaid-Bold.woff') format('woff'),
       url('/fonts/Mermaid-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

Примечания:

Указывайте относительные пути (например, /fonts/…) так, чтобы сервер отдавал файлы корректно.
font-display: swap рекомендуется для уменьшения времени до отображения текста (позволяет показать запасной шрифт, а затем «подменить» на нужный).

После регистрации используйте шрифт в стилях компонентов:

h1 {
  font-family: 'Mermaid', sans-serif;
}

Важно: проверьте размер файлов и применяйте субсеттинг (subset) — оставляйте только нужные знаки/языки, чтобы уменьшить вес.

Подключение веб‑шрифтов через CDN в Next.js

Подход через CDN проще: не нужно хранить файлы и создавать @font-face вручную. Популярные поставщики — Google Fonts, Adobe Fonts (Typekit) и пр. Next.js умеет оптимизировать некоторые внешние шрифты автоматически.

Способы подключения через CDN:

Через тег в head (подходит для глобальной области).
Через @import внутри CSS (подходит для изолированных CSS-файлов).

Подключение через тег link (в head)

Если нужно добавить в head каждой страницы, создайте кастомный документ в Next.js: /pages/_document.js.

Пример (_document.js):

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      
        
          
        
        
          
          
        
      
    );
  }
}

export default MyDocument;

Замечания:

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

Подключение через @import в CSS

Можно импортировать шрифт непосредственно в CSS:

@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&display=swap');

h1 {
  font-family: 'Libre Caslon Display', serif;
}

Разница: @import ограничен областью файла CSS, тогда как в head делает шрифт доступным для всего сайта.

Что лучше: хранить локально или использовать CDN?

Когда выбирать локально:

Нужно соответствовать политике конфиденциальности (избегать внешних запросов).
Требуется контроль версий и кэширования.
Нужен быстрый повторный рендер без внешних задержек.

Когда CDN удобнее:

Быстрая настройка и меньше задач для деплоя.
Возможность воспользоваться глобальными CDN‑кешами и оптимизациями провайдера (например, Next.js поддержка Google Fonts).

Если выбираете CDN, подумайте о предварительной загрузке (preload) ключевых файлов и о механизме font-display.

Когда этот подход не работает или даёт проблемы

Если шрифт имеет жесткие лицензионные ограничения (нельзя хранить локально) — потребуется CDN или коммерческая лицензия.
На медленных соединениях внешний запрос к CDN может увеличить первый рендер текста.
Для динамических сборок (SSR + критический CSS) может потребоваться дополнительная настройка preloading и inline стилей.

Альтернативные подходы

Использовать системные семейства шрифтов (sans-serif, serif, monospace) как запасной вариант.
Подключать только критические начертания локально (например, bold + regular), а редкие — через CDN.
Инструменты типа fontsubsetting, gulp‑fonter, fontmin для уменьшения веса шрифтов.

Мини‑методология внедрения (шаги для команды)

Оценка требований: языки, начертания, лицензии, ожидаемая аудитория.
Решение: локально vs CDN.
Подготовка: скачать/сконвертировать/проверить лицензию или выбрать URL CDN.
Интеграция: @font-face или link/@import в проект.
Оптимизация: font-display, preload, субсеттинг, кэширование.
Тестирование: на разных браузерах и устройствах, FOUT/FOIT поведение.
Документирование и мониторинг производительности.

Чеклист по ролям

Разработчик:

Проверил пути к файлам и mime‑типы.
Установил font-display и preload для критических шрифтов.
Настроил CI, чтобы шрифты попадали в финальный билд.

Девопс:

Настроил отдачу шрифтов с корректным Cache-Control и CORS.
Внёс файлы в систему доставки (если локально) или проверил SLA CDN.

Дизайнер:

Утвердил набор начертаний и запасные шрифты.
Подготовил рекомендации для fallback и размеров.

PM/Продукт:

Проверил лицензии и соответствие GDPR/политике приватности.
Утвердил приоритеты по производительности.

Критерии приёмки

Шрифты корректно отображаются в целевых браузерах (Chrome, Firefox, Safari, Edge).
Время до отображения текста не ухудшилось критически (FOUT/FOIT контролируется).
Лицензии и политика конфиденциальности соблюдены.
CI/деплой корректно выкладывает файлы (локальный) или ссылка на CDN доступна.

Примечания по конфиденциальности и лицензиям

Подключение шрифтов через внешний CDN может отправлять пользовательские запросы третьим лицам. Проверьте GDPR/CCPA последствия.
Всегда проверяйте лицензию шрифта перед локальным размещением — некоторые шрифты запрещают распространение.

Совместимость и миграционные советы

Для постепенной миграции: сначала подключите шрифт через CDN, затем при успехе перенесите локально и отключите CDN.
Проверьте старые браузеры: если целевая аудитория использует IE11, добавьте .eot; в большинстве современных проектов это необязательно.

Факты и практические замечания

Современные браузеры поддерживают .woff2 и .woff лучше всего; .woff2 даёт меньший размер и предпочтителен.
font-display: swap уменьшает время, пока пользователь увидит текст, но может вызвать краткую смену внешнего вида.
Субсеттинг шрифтов (оставлять только нужные символы) часто сокращает размер пакета значительно.

Короткое объявление для команды (100–200 слов)

Мы обновили стратегию подключения веб‑шрифтов в проекте Next.js. Доступны два варианта: быстрый — импорт через Google Fonts (CDN) и более контролируемый — локальная хостинг‑стратегия с @font-face. Рекомендуем для начала CDN для быстрого прототипа, затем перейти на локальное хранение с субсеттингом и preload для продакшен‑релиза. Проверьте лицензионные ограничения и настройте кэширование у DevOps. Документация и чеклисты в репозитории.

Социальный предпросмотр (рекомендации)

OG заголовок: Подключение веб‑шрифтов в Next.js — локально и через CDN OG описание: Пошаговое руководство по подключению и оптимизации веб‑шрифтов в Next.js: @font-face, Google Fonts, preload, субсеттинг и чеклисты для команд.

Краткое резюме

Локальная хостинг‑модель даёт контроль и часто лучшую производительность.
CDN‑подключение быстрее в установке и может использовать преимущества провайдера.
Всегда учитывайте лицензию, конфиденциальность и оптимизацию (font‑display, preload, субсеттинг).

Важно: протестируйте на целевых устройствах и зафиксируйте поведение FOUT/FOIT до и после изменений.