Оптимизация шрифтов Next.js с @next/font

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

Вы, возможно, захотите использовать кастомные шрифты, чтобы сделать приложение на Next.js более выразительным. Кастомные шрифты улучшают внешний вид, но при неправильной настройке могут замедлить загрузку сайта. Пакет @next/font решает эту проблему, предоставляя простой и эффективный способ оптимизации загрузки шрифтов.

Что делает @next/font

@next/font автоматизирует: самохостинг шрифтов Google, уменьшение количества внешних запросов, правильную генерацию font-face и удобную интеграцию с CSS-переменными. Это уменьшает «прыгание» текста (FOIT/FOUT) и делает поведение шрифтов предсказуемым на серверном рендеринге.

Важно: начиная с Next.js 13 и позже концепции «app» и «pages» отличаются. @next/font работает в обоих подходах, но некоторые детали интеграции зависят от выбранной архитектуры приложения.

Установка пакета

В терминале выполните:

npm install @next/font

Или с yarn:

yarn add @next/font

Использование Google Fonts через @next/font

Импорт шрифта из пакета производится как функция из ‘@next/font/google’. Ниже — пример для глобального подключения Roboto в файле pages/_app.js:

import { Roboto } from '@next/font/google'

const roboto = Roboto({ subsets: ['latin'] })

export default function MyApp({ Component, pageProps }) {
  return (
    
      
    
  )
}

Параметры, которые часто используются:

subsets — подмножество глифов (например, ‘latin’, ‘cyrillic’).
weight — один вес или массив весов: ‘400’ или [‘400’,’700’].
style — ‘normal’ или ‘italic’ либо массив.
variable — имя CSS-переменной, если вы интегрируете со Tailwind.

Пример с несколькими весами и стилями:

const roboto = Roboto({
  subsets: ['latin'],
  weight: ['400', '500', '700'],
  style: ['italic', 'normal']
})

Глобальное применение сделает шрифт основным для всего приложения; альтернативно — применяйте className на уровне отдельной страницы или компонента.

Локальные шрифты через @next/font/local

Для локальных файлов используйте localFont из ‘@next/font/local’. Пример для pages/_app.js:

import localFont from '@next/font/local'

const myFont = localFont({ src: './my-font.woff2' })

export default function MyApp({ Component, pageProps }) {
  return (
    
      
    
  )
}

Для нескольких файлов одного семейства укажите массив объектов с путями и метаданными:

const myFont = localFont({
  src: [
    { path: './Roboto-Regular.woff2', weight: '400', style: 'normal' },
    { path: './Roboto-Italic.woff2', weight: '400', style: 'italic' },
    { path: './Roboto-Bold.woff2', weight: '700', style: 'normal' },
    { path: './Roboto-BoldItalic.woff2', weight: '700', style: 'italic' }
  ]
})

Формат WOFF2 рекомендуется для веба — он компактный и широко поддерживается современными браузерами.

Интеграция с Tailwind CSS

Чтобы использовать шрифты через Tailwind, применяйте CSS-переменные. Пример с Inter и Tailwind:

import { Inter } from '@next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter'
})

export default function MyApp({ Component, pageProps }) {
  return (
    
      
    
  )
}

Добавьте переменную в tailwind.config.cjs:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)']
      }
    }
  },
  plugins: []
}

После этого класс utility font-sans применит вашу CSS-переменную.

Практические советы и эвристики

Подмножества: используйте только нужные наборы символов (latin, cyrillic и т. п.) — это сокращает объём файлов.
Веса: избегайте подключения множества весов без необходимости; каждый вес — отдельный файл.
Предзагрузка: @next/font управляет загрузкой шрифтов автоматически, но в специфичных случаях можно дополнительно использовать rel=preload для критических шрифтов.
Формат: отдавайте предпочтение WOFF2 для современных браузеров.
Локализация: для языков, отличающихся по набору глифов, указывайте соответствующие subsets или используйте локальные файлы.

Когда это не подходит — контрпримеры

CDN-специфичные требования: если ваша компания требует прямого подключения шрифтов из корпоративного CDN (для централизации лицензирования), самохостинг через @next/font может конфликтовать с политиками.
Редкие форматы: если шрифт доступен только в TTF/OTF и нет возможности переконвертировать в WOFF2, рабочий процесс усложнится.
Очень старые браузеры: для устаревших окружений нужно добавить полифиллы или альтернативы.

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

Google Fonts CDN: простой, но делает внешние запросы к Google и может влиять на приватность.
Fontsource / npm пакеты шрифтов: позволяют контролировать файлы, но требуют ручной настройки @font-face.
Самостоятельный самохостинг: копирование WOFF2 в public и ручной @font-face — гибко, но больше рутины и риска ошибок в оптимизации.

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

Next.js 12 vs 13+: основные API @next/font сохраняются, но структура проекта (app vs pages) меняет места файлов и точку интеграции.
Tailwind v2/v3: в большинстве случаев конфиг схож, но проверяйте синтаксис content и поддержку CSS-переменных.
Если мигрируете с внешнего CDN на @next/font — проверьте отсутствие дублирующих font-face, чтобы избежать конфликтов.

Факт-бокс

Что оптимизируется: уменьшение внешних запросов и корректный self-hosting.
Рекомендуемый формат: WOFF2.
Частая ошибка: подключение всех возможных весов и подмножеств «на всякий случай».

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

Дизайнер:

Выбрать семейство шрифтов и необходимые веса/стили.
Проверить читабельность и i18n-покрытие (латиница/кириллица).

Фронтенд-разработчик:

Установить @next/font и импортировать шрифты.
Применить className или CSS-переменную.
Проверить отсутствие дублирующих подключений.

Инженер производительности:

Замерить LCP и CLS до/после изменений.
Проверить network waterfall на наличие лишних внешних запросов.

Локализация:

Убедиться, что выбранные subsets покрывают целевые языки.
При необходимости добавить локальные файлы для специфичных глифов.

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

Шрифты загружаются без внешних запросов к Google (если используется локальный режим).
LCP и CLS не ухудшаются по сравнению с базовой версией.
Нет дублирующих @font-face в итоговом CSS.
Перекрытие стилей (fallbacks) корректно настроено.

Безопасность и приватность

При использовании Google Fonts через CDN браузер делает запросы к серверам Google — это может быть важным для требований GDPR/локальной приватности. @next/font решает этот момент, самохостя шрифты и устраняя внешние запросы к Google, но если вы используете Google CDN напрямую — обсудите с DPO правомерность такого подхода.

1‑строчный глоссарий

self-hosting — размещение шрифтов на собственном сервере вместо внешнего CDN.

Часто задаваемые вопросы

Нужно ли конвертировать шрифты в WOFF2?

WOFF2 рекомендуют для веба из-за сжатия и эффективности; если исходный шрифт в другом формате, рассмотрите конвертацию.

Работает ли @next/font в app-router (Next.js 13)?

Да, @next/font поддерживает оба роута, но место импорта и точки применения могут отличаться.

Можно ли использовать system- и fallback-шрифты вместе с @next/font?

Да. Указывайте резервные шрифты в CSS font-family, а @next/font будет управлять вашим кастомным файлом.

Краткое резюме: @next/font — удобный инструмент для большинства проектов Next.js, который упрощает самохостинг шрифтов, уменьшает внешние запросы и даёт гибкость для интеграции с Tailwind. Выбирайте веса и подмножества осмысленно, тестируйте производительность и учитывайте требования приватности при использовании внешних CDN.