Как использовать шрифты .ttf в Tailwind CSS

Если вы фронтенд-разработчик, вы могли столкнуться с некоторыми проблемами при поиске хороших и уникальных шрифтов. Если вы хотите использовать специальные шрифты, которых нет в Google fonts, но они доступны в форматах .ttf или .woff или любом другом. Затем я покажу вам, как использовать их с помощью Tailwind CSS.

Я покажу вам пошаговый процесс. Я инициализировал пустой проект на NextJs, поэтому я буду говорить о структуре папок NextJs, но вы можете следовать тому же процессу для любого фреймворка или для проекта на ванильном JS.

Шаг 1. Создайте папку font (вы можете использовать любое название) внутри папки styles.
Шаг 1. Добавьте шрифты .ttf или .woff в папку font.
Шаг 3. Создайте новый файл CSS в папке font, я создаю файл stylesheet.css.
Шаг 4. Теперь используйте правило CSS @font-face, которое позволяет нам импортировать наш собственный шрифт в CSS.

@font-face{
    font-family: 'Pixellari'; // Write the name of your custom font.


    // Below you need to give the path of the font, If you have only one format no problem
    // but if you have more then one format, you can add all those, you just need to
    // separate these with commas.
    src: url('Pixellari.woff2') format('woff2'), url('Pixellari.woff') format('woff');
}
Вход в полноэкранный режим Выход из полноэкранного режима

Шаг 5. Теперь вам нужно импортировать предыдущий CSS файл в ваш глобальный CSS, в моем случае мне нужно импортировать stylesheet.css в мой globals.css.

@import url('./fonts/stylesheet.css');
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Шаг 6. И последнее, вам нужно сообщить tailwind CSS, что вам нужно расширить font-family, для этого вам нужно добавить несколько строк в tailwind.config.js.

module.exports = {
    //.... All the initial code
    theme: {
        extend: {
            fontFamily: {
                'pixellari' : ['Pixellari', 'sans-serif'],  // after you font, add some fonts separated by commas to handle fallback.
            }
        }
    }
    //.... All the initial code
}
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь вы можете использовать свойство font-pixellari в вашем html class или jsx className.

Спасибо за ваше время

Надеюсь, вам понравился этот блог, и он добавил немного пользы вашим навыкам. Не стесняйтесь общаться со мной в Twitter или LinkedIn.

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