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

Шрифти відіграють вирішальну роль у підвищенні візуальної привабливості веб-сторінки. Дизайнери створюють численні красиві шрифти, що запам'ятовуються і справляють незабутнє враження на користувачів. Веб-сайтам з погано розробленими шрифтами може бути складно привернути увагу. На щастя, існують ресурси з вільним доступом, що дозволяють будь-кому використовувати готові шрифти. Однак важливо зазначити, що існують також ліцензійні шрифти, які потрібно купувати, і дуже важливо поважати закони про авторське право, щоб уникнути будь-яких порушень.

Сервіс Google Fonts

Існує багато чудових шрифтів, доступних для безкоштовного використання. Давайте розглянемо варіанти, що надаються за допомогою Google. Додати шрифт Google до розмітки дуже просто.

Для початку розглянемо наступний приклад, в якому використовується шрифт за замовчуванням. Елемент p має наступні властивості: font-family (назва шрифту), font-size (розмір шрифту) і font-weight (жирність шрифту).

Властивість font-family не працює, оскільки наш проект не знає кастомного шрифту "DM Sans". Настав час додати цей шрифт до проекту, і ми зробимо це за допомогою fonts.google.com.

У полі Пошук шрифту вводимо потрібний шрифт. У цьому прикладі нам потрібен "DM Sans". Потім натискаємо на картку шрифту "DM Sans".

На першій сторінці прокрутімо трохи вниз і побачимо список усіх доступних варіантів шрифту з різними стилями (курсив або звичайний) і різними варіантами жирності (400, 500 або 700).

Для цього прикладу нам потрібен шрифт Regular 400. Ми можемо вибрати його, натиснувши кнопку Select Regular 400 +, і з'явиться спливаюче вікно з посиланням, яке ми можемо скопіювати і використати у проекті.

Копіюємо посилання і вставляємо його у файл html проекту в елемент head. Важливим моментом є те, що ми повинні вставити посилання перед посиланням на наші кастомні стилі. Таким чином, браузер, читаючи HTML-документ, спочатку визначить, що ми використовуємо кастомні шрифти, а потім зрозуміє, де ми їх застосовуємо. Вставивши посилання, ми отримаємо кастомний шрифт "DM Sans". Запустимо проект, щоб переконатися, що він працює коректно.

We can observe the difference between the custom font and the default font. Additionally, each browser has its default fonts. Therefore, knowing how to use custom fonts on a website is essential.