Шрифты и next/font

Модуль next/font подключает шрифты так, чтобы страница не мигала при загрузке и не обращалась к сторонним серверам. Шрифты Google Fonts Next.js скачивает при сборке и раздаёт со своего адреса — посетитель не делает запросов к Google.

Шрифт Google Fonts

Стартовый проект уже подключает шрифт Geist. Заменим его на Inter с поддержкой кириллицы:

// app/layout.tsx
import { Inter } from 'next/font/google';
import './globals.css';
 
const inter = Inter({
  subsets: ['latin', 'cyrillic'],
});
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ru" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Каждый шрифт импортируется как функция с тем же именем, пробелы заменяются подчёркиванием: Roboto_Mono, Open_Sans. Свойство className содержит класс с нужным font-family. Обновите страницу — весь текст сайта станет набран Inter.

Наборы символов и начертания

Настройка	Пример	Зачем
`subsets`	`['latin', 'cyrillic']`	Какие алфавиты загружать
`weight`	`['400', '700']`	Начертания для шрифтов без переменной толщины
`style`	`['normal', 'italic']`	Курсив
`display`	`'swap'`	Как показывать текст до загрузки шрифта

Inter — переменный шрифт, поэтому weight для него можно не указывать: доступны все толщины.

Второй шрифт через CSS-переменную

Для заголовков часто берут отдельный шрифт. Удобно передать его в CSS как переменную:

// app/layout.tsx (фрагмент)
import { Inter, Lora } from 'next/font/google';
 
const inter = Inter({ subsets: ['latin', 'cyrillic'] });
const lora = Lora({ subsets: ['latin', 'cyrillic'], variable: '--font-heading' });
 
// <html lang="ru" className={`${inter.className} ${lora.variable}`}>

/* app/globals.css */
h1,
h2 {
  font-family: var(--font-heading);
}

Опция variable создаёт CSS-переменную с семейством шрифта. Заголовки на всех страницах получат Lora, остальной текст — Inter.

Свой файл шрифта

Файл шрифта из проекта подключает next/font/local:

// app/layout.tsx (фрагмент)
import localFont from 'next/font/local';
 
const brand = localFont({ src: './fonts/Brand.woff2' });

Путь указывается относительно файла, в котором вызывается функция. Используется так же: brand.className.

Частая ошибка

Вызывать Inter(...) внутри компонента или в нескольких файлах. Функции шрифтов нужно вызывать на верхнем уровне модуля, и каждый вызов создаёт отдельную копию шрифта. Подключайте шрифт один раз в корневом макете, а в остальных местах используйте класс или CSS-переменную.

Спасибо, что читаете!