Додавання користувацьких шрифтів на вебсторінку
Шрифти відіграють ключову роль у підвищенні візуальної привабливості веб-сторінки. Дизайнери створюють численні запам’ятовувані та красиві шрифти, щоб залишити тривале враження на користувачів. Вебсайти з невдало підібраними шрифтами можуть втратити увагу відвідувачів. На щастя, існують ресурси з безкоштовним доступом, які дозволяють будь-кому використовувати готові шрифти. Однак важливо пам’ятати, що є й ліцензійні шрифти, які потребують придбання, і необхідно дотримуватися авторських прав, щоб уникнути порушень.
Сервіс 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 font".
Далі натисніть кнопку "Get embed code".
Нарешті, скопіюйте посилання та вставте його у HTML-файл вашого проєкту всередині елемента <head>. Важливо вставити це посилання перед посиланням на ваші власні стилі. Це гарантує, що браузер спочатку завантажить користувацькі шрифти, а вже потім застосує стилі, які їх використовують. Після додавання посилання шрифт "DM Sans" буде доступний як користувацький шрифт для вашого проєкту. Тепер запустіть проєкт, щоб переконатися, що все працює правильно.
index.html
styles.css
Можна спостерігати різницю між кастомним шрифтом та стандартним шрифтом. Крім того, кожен браузер має свої стандартні шрифти. Тому важливо знати, як використовувати кастомні шрифти на вебсайті.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 2.56Додавання користувацьких шрифтів на вебсторінку
Свайпніть щоб показати меню
Шрифти відіграють ключову роль у підвищенні візуальної привабливості веб-сторінки. Дизайнери створюють численні запам’ятовувані та красиві шрифти, щоб залишити тривале враження на користувачів. Вебсайти з невдало підібраними шрифтами можуть втратити увагу відвідувачів. На щастя, існують ресурси з безкоштовним доступом, які дозволяють будь-кому використовувати готові шрифти. Однак важливо пам’ятати, що є й ліцензійні шрифти, які потребують придбання, і необхідно дотримуватися авторських прав, щоб уникнути порушень.
Сервіс 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 font".
Далі натисніть кнопку "Get embed code".
Нарешті, скопіюйте посилання та вставте його у HTML-файл вашого проєкту всередині елемента <head>. Важливо вставити це посилання перед посиланням на ваші власні стилі. Це гарантує, що браузер спочатку завантажить користувацькі шрифти, а вже потім застосує стилі, які їх використовують. Після додавання посилання шрифт "DM Sans" буде доступний як користувацький шрифт для вашого проєкту. Тепер запустіть проєкт, щоб переконатися, що все працює правильно.
index.html
styles.css
Можна спостерігати різницю між кастомним шрифтом та стандартним шрифтом. Крім того, кожен браузер має свої стандартні шрифти. Тому важливо знати, як використовувати кастомні шрифти на вебсайті.
Дякуємо за ваш відгук!
