Как использовать шрифты
Модуль next/font автоматически оптимизирует ваши шрифты и исключает внешние сетевые запросы для улучшения конфиденциальности и производительности.
Он включает встроенный self-hosting для любых файлов шрифтов. Это означает, что вы можете оптимально загружать веб-шрифты без сдвига макета.
Чтобы начать использовать next/font, импортируйте его из next/font/local или next/font/google, вызовите как функцию с соответствующими параметрами и установите className для элемента, к которому нужно применить шрифт. Например:
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function Layout({ children }) {
return (
<html className={geist.className}>
<body>{children}</body>
</html>
)
}Шрифты ограничены компонентом, в котором они используются. Чтобы применить шрифт ко всему приложению, добавьте его в Корневой макет (Root Layout).
Google Fonts
Вы можете автоматически размещать любые шрифты Google Fonts на своем сервере. Шрифты включаются как статические ресурсы и обслуживаются с того же домена, что и ваше развертывание, что означает отсутствие запросов к Google при посещении сайта пользователем.
Чтобы начать использовать шрифт Google, импортируйте выбранный шрифт из next/font/google:
import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}import { Geist } from 'next/font/google'
const geist = Geist({
subsets: ['latin'],
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={geist.className}>
<body>{children}</body>
</html>
)
}Мы рекомендуем использовать переменные шрифты (variable fonts) для лучшей производительности и гибкости. Но если вы не можете использовать переменный шрифт, вам нужно указать вес:
import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}import { Roboto } from 'next/font/google'
const roboto = Roboto({
weight: '400',
subsets: ['latin'],
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={roboto.className}>
<body>{children}</body>
</html>
)
}Локальные шрифты
Чтобы использовать локальный шрифт, импортируйте его из next/font/local и укажите src вашего локального файла шрифта. Шрифты могут храниться в папке public. Например:
import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}import localFont from 'next/font/local'
const myFont = localFont({
src: './my-font.woff2',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={myFont.className}>
<body>{children}</body>
</html>
)
}Если вы хотите использовать несколько файлов для одного семейства шрифтов, src может быть массивом:
const roboto = 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',
},
],
})