Всім здоров'я! Сьогодні я хочу розповісти вам, як використовувати Google Fonts API. щоб вставляти потрібні вам шрифти.
Отже, для початку перейдіть за посиланням: www.google.com/fonts
Зліва ви можете бачити фільтр. а праворуч приклади самих різних шрифтів. Виберіть будь-який, який вам сподобається. Далі натисніть на кнопку quick-use.
Після цього перед вами з'явиться сторінка, де ви зможете вибрати потрібні вам стилі для шрифту.
Наприклад, виберемо нормальний (400) і жирний (700) стиль.
Нижче, під цифрою 3. ви можете знайти код для вставки. Я вважаю за краще вибирати підключення до файлу стилів, так що я натисну на вкладку @import. Розмістіть цей код.
Тепер створимо файл index.html з параграфом тексту.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, officia?
Підключимо нашу таблицю стилів в тезі head
І в таблиці стилів, на початку файлу, вставимо скопійований код.
Я вибрав шрифт Open Sans як приклад. Він найперший.
На сторінці з шрифтом, під цифрою 4. ви можете знайти потрібний нам стиль. Скопіюємо його і застосуємо для нашого параграфа.
Усе! Тепер ви можете радіти новому шрифту!
Але не забуваємо, що ми також вибирали і жирний стиль. Щоб його застосувати, досить прописати font-weight з тим числом, яке ви вибрали на сайті. У моєму випадку - 700.
p font-family: # 'Open Sans #', sans-serif;
font-weight: 700;
>
Також, як і жирність, можна застосовувати і курсивний стиль, якщо ви його вибрали на сайті.
Ось так легко використовувати google шрифти. Насамкінець варто лише сказати, що всі ці шрифти навантажують ваш сайт. Для цього на сайті при виборі шрифту справа є індикатор, який показує, на скільки буде завантажена сторінка. Слідкуйте, щоб число не було занадто великим і використовуйте лише ті шрифти, які вам правда потрібні. Не варто вибирати відразу всі стилі, мало чи стануть в нагоді.
Отже, на цьому все. Дякую за увагу і до зустрічі!
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так:
питання ці шрифти не потрібно встановлювати і вони будуть працювати у всіх клієнтів?