Оптимізація шрифтів (next/font) у Next.js

Що таке next/font?

next/font — це вбудована система оптимізації шрифтів у Next.js. Вона автоматично самостійно хостить шрифти (включаючи Google Fonts), усуває зовнішні запити до мережі та запобігає зсуву макета (CLS) за допомогою автоматичного size-adjust.

Google Fonts

tsx

// app/layout.tsx
import { Inter, Roboto_Mono } from "next/font/google";

const inter = Inter({
  subsets: ["latin", "cyrillic"],
  display: "swap",
  variable: "--font-inter",
});

const robotoMono = Roboto_Mono({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-roboto-mono",
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={`${inter.variable} ${robotoMono.variable}`}>
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

Локальні шрифти

tsx

import localFont from "next/font/local";

const myFont = localFont({
  src: [
    { path: "./fonts/MyFont-Regular.woff2", weight: "400", style: "normal" },
    { path: "./fonts/MyFont-Bold.woff2", weight: "700", style: "normal" },
    { path: "./fonts/MyFont-Italic.woff2", weight: "400", style: "italic" },
  ],
  display: "swap",
  variable: "--font-my-font",
});

Використання CSS змінних

tsx

// layout.tsx — застосування змінної
<html className={inter.variable}>

// У CSS/Tailwind
// globals.css
body {
  font-family: var(--font-inter), sans-serif;
}

code {
  font-family: var(--font-roboto-mono), monospace;
}

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)"],
        mono: ["var(--font-roboto-mono)"],
      },
    },
  },
};

Основні параметри

Параметр	Опис	Приклад
`subsets`	Набори символів для включення	`["latin", "cyrillic"]`
`weight`	Ваги шрифтів для завантаження	`["400", "700"]` або `"variable"`
`display`	Значення CSS font-display	`"swap"`, `"block"`, `"auto"`
`variable`	Ім'я CSS кастомної властивості	`"--font-inter"`
`preload`	Попереднє завантаження шрифту (за замовчуванням: true)	`true` / `false`
`fallback`	Резервні сімейства шрифтів	`["system-ui", "arial"]`
`adjustFontFallback`	Автоматичне регулювання розміру для резервного шрифту	`true` / `false`

Як це працює

Час збірки: Next.js завантажує файли шрифтів
Самостійно хостинг: Шрифти подаються з вашого домену (без зовнішніх запитів)
size-adjust: Автоматичний CSS size-adjust для мінімізації CLS
Попереднє завантаження: Файли шрифтів попередньо завантажуються для швидкого рендерингу

Переваги

Без зовнішніх запитів — шрифти самостійно хостяться (відповідає GDPR, швидше)
Нульовий зсув макета — автоматичний size-adjust для резервних шрифтів
Автоматичне підмноження — завантажуються лише символи, які вам потрібні
Кешування — незмінні файли шрифтів з довгими заголовками кешу
Без спалаху неформатованого тексту — попередньо завантажено та оптимізовано

Важливо:

next/font усуває проблеми з продуктивністю веб-шрифтів: немає зовнішніх запитів до мережі, немає зсуву макета та автоматична оптимізація. Завжди використовуйте його замість ручного завантаження Google Fonts через теги <link>. Використовуйте CSS змінні (параметр variable) для максимальної гнучкості з Tailwind CSS.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Оптимізація шрифтів (next/font) у Next.js

#Що таке next/font?

#Google Fonts

#Локальні шрифти

#Використання CSS змінних

#Основні параметри

#Як це працює

#Переваги