Додавання Користувацьких Шрифтів Google

Перейдемо до шрифтів, які будуть використовуватися в додатку.

Шрифти додатку автоматично оптимізуються при використанні модуля next/font у Next.js. Файли шрифтів завантажуються під час збірки та розміщуються разом з іншими статичними ресурсами. У результаті, коли користувач відвідує ваш додаток, додаткові мережеві запити для завантаження шрифтів не потрібні, що сприяє підвищенню продуктивності.

Повернення до проєкту

Додамо користувацький шрифт Poppins від Google для нашого додатку.

1. Створити новий файл з назвою fonts.ts у папці app/ui;
2. Імпортувати шрифт Poppins з модуля next/font/google;
3. Також необхідно вказати параметри weight та subsets для шрифту.

Тепер можна використовувати шрифт Poppins у застосунку. Застосуйте його до елемента body у файлі app/layout.tsx.

У результаті весь застосунок використовує шрифт Poppins.

У наступному розділі буде додано додаткові шрифти.

На практиці