Додавання користувацьких шрифтів на вебсторінку
Шрифти суттєво впливають на зовнішній вигляд і сприйняття вебсайту. Якісна типографіка підвищує читабельність і робить дизайн більш впізнаваним. Багато шрифтів доступні для безкоштовного використання, інші потребують ліцензування — завжди дотримуйтеся правил авторського права.
Сервіс 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
Можна спостерігати різницю між кастомним шрифтом та стандартним шрифтом. Крім того, кожен браузер має свої стандартні шрифти. Тому важливо знати, як використовувати кастомні шрифти на вебсайті.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
How do I add a Google Font to my HTML file?
What is the purpose of the preconnect links in the head section?
Can you explain the difference between default and custom fonts?
Чудово!
Completion показник покращився до 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
Можна спостерігати різницю між кастомним шрифтом та стандартним шрифтом. Крім того, кожен браузер має свої стандартні шрифти. Тому важливо знати, як використовувати кастомні шрифти на вебсайті.
Дякуємо за ваш відгук!
