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

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

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

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

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

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

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

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

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

На практиці

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 2. Розділ 8

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can I use multiple font weights or styles with the Poppins font?

How do I add another custom Google font to my project?

What should I do if the font doesn't appear correctly in my app?

Awesome!

Completion rate improved to 2.08

Свайпніть щоб показати меню