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

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

Краткое определение

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

Когда выбирать локальное размещение и когда CDN

Локальное размещение (self-hosted): лучше для контроля, приватности и детерминированной загрузки. Рекомендуется для производственных сайтов с SLA.
CDN (Google Fonts, Typekit и т.д.): быстрее настроить, часто кэшируется глобально, но вы зависите от внешнего сервиса и возможных задержек.

Important: если вы используете шрифты сторонних провайдеров, проверьте лицензию — некоторые шрифты запрещают локальное размещение.

Самостоятельно размещённые шрифты в Next.js

Шаги по внедрению self-hosted шрифтов:

Скачайте файлы шрифтов (OTF/TTF) у поставщика с подходящей лицензией.
Конвертируйте в web-форматы (.woff, .woff2). WOFF2 — приоритетный формат для современных браузеров.
Создайте папку fonts в корне сайта и поместите туда файлы.
Объявите @font-face в глобальном CSS (например, styles/global.css).
При необходимости — preloading критических шрифтов.

Пример объявления для полужирной гарнитуры Mermaid:

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

Применение в CSS-компоненте:

h1 {  
    font-family: Mermaid;  
}

Советы по оптимизации при локальном размещении:

Используйте font-display: swap, чтобы избежать блокирования рендеринга.
Предзагрузите критические шрифты в для ускорения первого отрисовывания:

Note: crossorigin обычно нужен, если шрифт загружается с другого домена. Для локальных файлов можно не указывать, но если вы используете CDN с CORS — задайте атрибут.

Форматы и совместимость

Формат	Подходит для
woff2	Современные браузеры (рекомендуется)
woff	Широкая поддержка, запасной вариант
ttf/otf	Старые браузеры и резерв
eot	Internet Explorer (наследие)

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

Подключение через CDN проще: не нужно хранить файлы и объявлять @font-face вручную. Next.js умеет оптимизировать Google Fonts при импорте.

Добавление CDN-шрифта через тег link

Для вставки в head всех страниц создайте кастомный документ: /pages/_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;

Этот подход делает шрифт доступным для всего сайта.

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

Вы можете импортировать шрифт в файле styles/global.css:

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

И затем использовать его в селекторе:

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

Разница: @import ограничен областями CSS-файла, где он объявлен; в _document.js делает шрифт глобальным и часто предпочтительнее для базовых гарнитур.

Когда CDN не лучший выбор

Требования к приватности или соответствию (например, GDPR) ограничивают вызовы к внешним сервисам.
Нужно гарантировать моментальную доступность шрифта при первом рендере без внешней зависимости.
Необходим тонкий контроль за набором форматoв и подгрузкой.

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

Шрифт отображается ожидаемо в целевых браузерах.
Нет существенного FOUT/FOIT (вспышка/скрытие текста) при загрузке страницы.
Лицензия шрифта допускает выбранный способ размещения.
Размер загрузки и время первого контента (FCP) находятся в пределах SLA проекта.

Оперативный чек-лист для команды

Для разработчика: проверить расположение файлов, пути в CSS, корректность атрибутов preload и CORS.
Для дизайнера: подтвердить веса/гарнитуры, альтернативные семейства (fallback fonts).
Для DevOps: включить кэширование на CDN/сервере, настроить заголовки Cache-Control.

Модель принятия решения (упрощённая)

Нужен полный контроль и минимальная внешняя зависимость? → Локально.
Нужно быстро и просто подключить шрифты с автоматической оптимизацией? → CDN.

flowchart TD
  A[Начало] --> B{Требуется контроль/конфиденциальность}
  B -- Да --> C[Self-hosted]
  B -- Нет --> D{Шрифт доступен на Google Fonts/Typekit}
  D -- Да --> E[Подключить через CDN]
  D -- Нет --> C
  C --> F[Процесс: скачать → конверт → @font-face → preload]
  E --> G[Процесс: link/@import → проверить оптимизацию Next.js]

Дополнительные рекомендации и ошибки

Не используйте большое количество разных веб-шрифтов одновременно — это увеличивает загрузку и ухудшает UX.
Если нужны только отдельные начертания (например, только bold), генерируйте subset с только нужными глифами.
Всегда указывайте fallback-гарнитуры в font-family, например: font-family: ‘Libre Caslon Display’, serif;

Итог и рекомендации

Для большинства проектов удобнее начать с CDN (быстро и просто). Если рост требований по производительности и конфиденциальности — мигрируйте на локальное размещение.
Используйте font-display: swap и предзагрузку критичных шрифтов.
Проверьте лицензию шрифтов перед локальным размещением.

Summary: