При создании веб-приложения включение предпочитаемого вами шрифта — это как вишенка на торте. Шрифты улучшают текст, делают веб-сайт более привлекательным и обеспечивают лучший пользовательский опыт. Дизайнеры и разработчики любят и ненавидят некоторые шрифты, и использование шрифта по умолчанию может ограничить их творческий потенциал. Добавление пользовательских шрифтов дает разработчикам возможность добавлять в свои приложения внешние шрифты.

Предварительные условия

В этом уроке я настоятельно рекомендую вам иметь базовые знания CSS Tailwind.

Я предполагаю, что читатель знаком с Tailwind CSS и с тем, как интегрировать Tailwind в приложение. Если вы новичок в Tailwind, вы можете найти в официальной документации инструкции по его установке.

Что такое пользовательский шрифт?

Пользовательские шрифты — это шрифты, которые недоступны для использования по умолчанию. Пользовательские шрифты не существуют в вашей системе и недоступны при необходимости. Они включают в себя шрифты, которые вы покупаете, размещаете в Интернете, создаете самостоятельно или специально фирменные шрифты, которые использует ваша компания. Популярным примером пользовательского шрифта является шрифт Google.

Добавление пользовательских шрифтов в ваш проект

Когда вы устанавливаете Tailwind в свой проект, он добавляет файл с именем Tailwind.config. Внутри файла Tailwind.config мы добавляем пользовательские шрифты, цвета, шаблоны макета сетки, размеры шрифтов и т. д. Чтобы добавить пользовательские шрифты, поместите пользовательские свойства между объектом расширения. Посмотрите ниже, как выглядит файл Tailwind.config:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: { },
    },
  },
  plugins: [],
};

Чтобы добавить собственный шрифт, я буду использовать Google Fonts. Перейдите на сайт шрифтов Google, нажмите «Выбрать стили», затем выберите предпочитаемый шрифт. В этом уроке я буду использовать шрифт Рубика. См. графическое изображение веб-сайта, использующего шрифты Google, ниже, с номерами в кружках:

Чтобы прикрепить ссылку Google к HTML-файлу, выполните следующие действия:

• Скопируйте ссылку из Google.

• Перейдите к файлу index.html.

• Найдите тег head и вставьте внутрь ссылку из Google Fonts.
  

Использование пользовательских шрифтов

После вставки шрифтов Rubik в файл index.html шрифт Rubik должен быть доступен в вашем проекте, но вы пока не можете его использовать.

Чтобы использовать:

Перейдите в файл Tailwind.config.

Добавьте семейство шрифтов внутри объекта расширения.

Внутри семейства шрифтов я дам шрифту имя, в данном случае имя — руб. Оно может иметь любое имя. Откройте скобку, добавьте название шрифта («Рубик») и резервный шрифт.

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
      },
    },
  },
  plugins: [],
};

Tailwind распознает шрифт Рубика, но я его не использовал. Перейдите к файлу или компоненту, в котором вы хотите использовать шрифт, и добавьте шрифт Рубика к его атрибутам class=''/className=''. Чтобы применить собственный шрифт к вашему проекту, используйте Rub, а не Rubik. См. пример ниже:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default Font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Использование локально загруженных шрифтов

Чтобы использовать шрифты, загруженные локально, я выберу случайный веб-сайт. Вы можете попробовать любой веб-сайт по вашему выбору. Зайдите на сайт dafont, найдите шрифт в строке поиска, а затем загрузите его на свой локальный компьютер. См. графическое изображение веб-сайта dafont ниже с цифрами в кружках:

Извлеките zip-файл (я использую WinRAR для извлечения), скопируйте извлеченный файл и вставьте его в папку вашего проекта. См. пример ниже:

Следующий шаг — перейти к файлу /index.css и вставить @font-face, чтобы добавить собственный шрифт в проект. Я буду использовать ADELIA для семейства шрифтов и src:, чтобы указать, где шрифт доступен.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'ADELIA';
    src: url('./fonts/ADELIA.ttf');
}

Чтобы интегрировать шрифт Rubik, перейдите к файлу Tailwind.config и выполните следующие действия:

• Добавьте собственное имя служебного класса.

• Откройте скобку

• Вставьте «ADELIA» и «cursive» в качестве резервного шрифта.

Вот пример:

/* tailwind.config file */

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      fontFamily: {
        'rub': ["Rubik", "sans-serif"],
        'adelia': ['ADELIA', 'cursive']
      },
    },
  },
  plugins: [],
};

Теперь мы можем использовать этот шрифт в нашем проекте:

// the file/component 

import React from 'react'

function CustomFonts() {
  return (
    

        

            
            
Default font
            
Hello My name is Emeka and I enjoy creating things that     
            live on the internet. I also write technical articles.
        
        

            
            
Custom Font(Rubik Font)
            
Hello My name is Emeka and I enjoy         
            creating things that live on the internet. I also write             
            technical articles.
        
    
  )
}

export default CustomFonts

Заключение

Вы можете использовать собственный шрифт в любом компоненте или файле. Нет никаких ограничений для конкретного файла или компонента; вы можете использовать его в нескольких компонентах или файлах вашего проекта. Кроме того, вы можете добавить в файл конфигурации более одного пользовательского шрифта. Надеюсь, статья была полезна. Ставьте лайк, комментируйте и делитесь, чтобы другие могли учиться. Спасибо.