Пошук уроків, статей та іншого контенту
Підключите шрифти через next/font і налаштуєте їхні сімейства, накреслення та ваги.
next/fontnext/font — вбудований механізм Next.js для підключення шрифтів. Він дає змогу:
підключати шрифти Google Fonts або локальні файли;
завантажувати шрифти під час складання застосунку;
налаштовувати сімейство, накреслення та вагу;
уникати окремого запиту браузера до сервісу Google Fonts;
застосовувати шрифт через CSS-клас або CSS-змінну.
Для шрифтів Google використовується модуль next/font/google, а для локальних файлів — next/font/local.
У застосунку з App Router глобальні шрифти зазвичай підключають у файлі app/layout.tsx.
Створімо файл із двома сімействами:
Inter — для основного тексту;
Roboto Slab — для заголовків.
// app/layout.tsx
import type { Metadata } from 'next'
import { Inter, Roboto_Slab } from 'next/font/google'
import './globals.css'
const inter = Inter({
subsets: ['latin', 'cyrillic'],
weight: ['400', '600', '700'],
style: ['normal', 'italic'],
display: 'swap',
variable: '--font-inter',
})
const robotoSlab = Roboto_Slab({
subsets: ['latin', 'cyrillic'],
weight: ['400', '700'],
style: ['normal'],
display: 'swap',
variable: '--font-heading',
})
export const metadata: Metadata = {
title: 'Каталог книг',
description: 'Приклад підключення шрифтів через next/font',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="uk">
<body className={`${inter.variable} ${robotoSlab.variable}`}>
{children}
</body>
</html>
)
}Тепер застосуємо ці шрифти у глобальних стилях:
/* app/globals.css */
:root {
--background: #ffffff;
--foreground: #1f2937;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--background);
color: var(--foreground);
font-family: var(--font-inter), sans-serif;
font-weight: 400;
}
h1,
h2 {
font-family: var(--font-heading), serif;
font-weight: 700;
}
em {
font-style: italic;
}
strong {
font-weight: 700;
}Приклад сторінки:
// app/page.tsx
export default function HomePage() {
return (
<main>
<h1>Каталог книг</h1>
<p>
Це звичайний текст, для якого використовується шрифт Inter із вагою 400.
</p>
<p>
<strong>Цей текст має вагу 700.</strong>
</p>
<p>
<em>А цей текст має курсивне накреслення.</em>
</p>
</main>
)
}У результаті:
основний текст використовує сімейство Inter;
заголовок використовує сімейство Roboto Slab;
вага 400 використовується для звичайного тексту;
вага 700 використовується для жирного тексту;
для курсиву використовується накреслення italic.
Функція шрифту повертає об’єкт із властивостями, які можна застосувати до елемента.
classNameЯкщо потрібен один шрифт для всього елемента, можна використати className:
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin', 'cyrillic'],
weight: ['400', '700'],
})
export default function Page() {
return (
<main className={inter.className}>
<h1>Сторінка зі шрифтом Inter</h1>
<p>Увесь вміст цього елемента використовує Inter.</p>
</main>
)
}next/font автоматично створює CSS-клас із налаштованим сімейством шрифту.
Цей підхід зручний, коли:
на елементі має бути лише один шрифт;
не потрібно перемикати сімейства в CSS;
шрифт застосовується до всього документа або окремого блока.
variableВластивість variable створює CSS-змінну:
const inter = Inter({
subsets: ['latin', 'cyrillic'],
variable: '--font-inter',
})Після цього клас inter.variable потрібно додати до елемента:
<body className={inter.variable}>{children}</body>Саме додавання CSS-змінної ще не змінює шрифт елементів. Її потрібно використати у CSS:
body {
font-family: var(--font-inter), sans-serif;
}Підхід із CSS-змінною зручний, коли в застосунку є кілька сімейств шрифтів або потрібно керувати ними через CSS.
Накреслення визначається властивістю style.
Найпоширеніші значення:
normal — звичайне накреслення;
italic — курсивне накреслення.
import { Inter } from 'next/font/google'
const inter = Inter({
subsets: ['latin', 'cyrillic'],
weight: ['400', '700'],
style: ['normal', 'italic'],
})У CSS накреслення застосовується через font-style:
.normalText {
font-style: normal;
}
.italicText {
font-style: italic;
}Підключайте лише ті накреслення, які справді використовуєте. Наприклад, якщо в конфігурації вказано тільки normal, браузер не матиме окремого файлу шрифту для italic.
Вага шрифту визначається властивістю weight:
const inter = Inter({
subsets: ['latin', 'cyrillic'],
weight: ['400', '600', '700'],
})Поширені значення:
400 — звичайний текст;
500 — середня вага;
600 — напівжирний текст;
700 — жирний текст.
Після цього відповідні ваги можна використовувати в CSS:
body {
font-weight: 400;
}
.subtitle {
font-weight: 600;
}
.title {
font-weight: 700;
}Вказуйте в конфігурації всі ваги, які потрібні дизайну. Наприклад, якщо в стилях використовується font-weight: 600, але в next/font підключено тільки 400 і 700, потрібна вага не буде завантажена як окремий файл.
Для локальних файлів використовується next/font/local.
Припустімо, у проєкті є такі файли:
app/
fonts/
MyFont-Regular.woff2
MyFont-Bold.woff2
layout.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',
},
],
variable: '--font-my-font',
})Застосування у layout.tsx:
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="uk">
<body className={myFont.variable}>{children}</body>
</html>
)
}А у CSS:
body {
font-family: var(--font-my-font), sans-serif;
}Для кожного локального файлу потрібно вказати:
path — шлях до файлу;
weight — вага шрифту;
style — накреслення.
Так Next.js розумітиме, який файл використовувати для конкретної комбінації font-weight і font-style.
Для шрифтів Google можна вказати набори символів через subsets:
const inter = Inter({
subsets: ['latin', 'cyrillic'],
})Для україномовного тексту потрібен набір, що містить кириличні символи, наприклад cyrillic.
Доступні набори залежать від конкретного шрифту. Не кожен шрифт підтримує всі значення subsets. Якщо вказати набір, якого немає для вибраного шрифту, Next.js повідомить про помилку під час складання застосунку.
displayПараметр display визначає поведінку тексту, поки файл шрифту завантажується:
const inter = Inter({
subsets: ['latin', 'cyrillic'],
display: 'swap',
})Значення swap дозволяє одразу показати текст із резервним шрифтом, а після завантаження застосувати потрібний шрифт.
Для більшості звичайних інтерфейсів display: 'swap' є зручним вибором.
Створення конфігурації не змінює шрифт автоматично:
const inter = Inter({
subsets: ['latin', 'cyrillic'],
})Потрібно використати inter.className або inter.variable:
<body className={inter.className}>{children}</body>або:
<body className={inter.variable}>{children}</body>У другому випадку не забудьте використати змінну в CSS.
const inter = Inter({
subsets: ['latin', 'cyrillic'],
weight: ['400'],
}).title {
font-weight: 700;
}У цьому прикладі вага 700 не підключена. Додайте її до конфігурації:
const inter = Inter({
subsets: ['latin', 'cyrillic'],
weight: ['400', '700'],
})italicЯкщо потрібен курсив, додайте його:
const inter = Inter({
subsets: ['latin', 'cyrillic'],
weight: ['400', '700'],
style: ['normal', 'italic'],
})Цей код не працюватиме без inter.variable:
<body>{children}</body>Потрібно передати клас:
<body className={inter.variable}>{children}</body>Шлях у localFont обчислюється відносно файлу, у якому викликається localFont.
Якщо файл має шлях:
app/fonts/MyFont-Regular.woff2а конфігурація розташована в app/layout.tsx, правильний шлях:
path: './fonts/MyFont-Regular.woff2'Для Google Fonts використовуйте next/font/google.
Для файлів .woff, .woff2 та інших локальних шрифтів використовуйте next/font/local.
weight визначає доступні ваги шрифту.
style визначає накреслення, наприклад normal або italic.
className одразу застосовує шрифт до елемента.
variable створює CSS-змінну для використання в стилях.
Для українського тексту перевіряйте наявність набору cyrillic.
У конфігурації потрібно вказувати всі ваги й накреслення, які використовує застосунок.