Подключение шрифта в NextJS

NextJS позволяет подключать шрифты из Google Fonts без отдельной ссылки в CSS на сторонний сайт. Модуль next/font/google скачивает нужные начертания на этапе сборки и отдает их вместе с приложением.

Давайте подключим шрифт Inter с набором символов latin. Класс шрифта повесим на элемент body в корневом макете, и весь текст сайта будет набран шрифтом Inter. Откроем layout.jsx в папке app и добавим код:

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

let inter = Inter({
	subsets: ['latin'],
});

export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<body className={inter.className}>
				{children}
			</body>
		</html>
	);
}

Подключите к проекту шрифт Roboto так, чтобы им был набран текст всего сайта.

Проверьте в браузере, что основной текст страницы отображается выбранным шрифтом.