Как применить Google Fonts к приложению Next.js и Tailwind CSS.

Я погуглил и нашел несколько решений для этого.

Но здесь я предлагаю более простой вариант.

  • Это полезно для одноразовых шрифтов в вашем проекте.

  • Не нужно создавать _document.js или редактировать tailwind.config.js.

Решение

  1. Зайдите в Google Fonts и выберите шрифт

  2. Выберите @import и скопируйте коды

  3. Вставьте его в styles/globals.css

    @import url('https://fonts.googleapis.com/css2?family=Caveat&family=Oswald:wght@200&display=swap');
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
  4. Используйте его везде

    Введите font-[<Имя вашего шрифта>], чтобы применить.

<h1 className="font-bold text-4xl font-['Oswald']">This Is Title</h1>
Вход в полноэкранный режим Выход из полноэкранного режима

Советы

Если вы используете шрифты, в названиях которых есть пробелы, объедините их с помощью -.

например, font-['Cormorant-SC'] для Cormorant SC.

Моя среда

  • «next»: «12.2.3»
  • «react»: «18.2.0»
  • «tailwindcss»: «^3.1.6»

Оцените статью
devanswers.ru
Добавить комментарий