Додавання Власних Шрифтів
Свайпніть щоб показати меню
Шрифти суттєво впливають на зовнішній вигляд і сприйняття вебсайту. Якісна типографіка підвищує читабельність і робить дизайн більш впізнаваним. Багато шрифтів доступні для безкоштовного використання, інші потребують ліцензування — завжди дотримуйтеся правил авторського права.
Сервіс Google Fonts
Існує багато цікавих шрифтів для безкоштовного використання. Розглянемо можливості, які надає https://fonts.google.com/. Додати шрифт Google до розмітки дуже просто.
Спочатку запустіть наступний приклад, який використовує шрифт за замовчуванням. Елемент p має такі властивості: font-family (назва шрифту), font-size (розмір шрифту) та font-weight (насиченість шрифту).
index.html
styles.css
Властивість font-family не працює, оскільки наш проєкт ще не знає про користувацький шрифт "DM Sans". Додайте цей шрифт до проєкту за допомогою https://fonts.google.com/.
Натисніть на зображення, щоб переглянути деталі чіткіше.
У полі "Search fonts" введіть назву потрібного шрифту. У цьому випадку це "DM Sans". Коли шрифт з’явиться, натисніть на картку "DM Sans".
На сторінці шрифту натисніть кнопку "Отримати шрифт".
Далі натисніть кнопку "Get embed code".
Нарешті, скопіюйте посилання та вставте його у HTML-файл вашого проєкту всередині елемента <head>. Важливо вставити посилання перед посиланням на ваші власні стилі. Це гарантує, що браузер спочатку завантажить користувацькі шрифти, а вже потім застосує стилі, які їх використовують. Після додавання посилання шрифт "DM Sans" буде доступний як користувацький для вашого проєкту. Тепер запустіть проєкт, щоб переконатися, що все працює правильно.
index.html
styles.css
Можна спостерігати різницю між кастомним шрифтом та стандартним шрифтом. Крім того, кожен браузер має свої стандартні шрифти. Тому важливо знати, як використовувати кастомні шрифти на вебсайті.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
