Як використовувати google fonts api.

Всім здоров`я! Сьогодні я хочу розповісти вам, як використовувати Google Fonts API, щоб вставляти потрібні вам шрифти.

Отже, для початку перейдіть за посиланням: google.com/fonts

Зліва ви можете бачити фільтр, а праворуч приклади самих різних шрифтів. Виберіть будь-який, який вам сподобається. Далі натисніть на кнопку quick-use.

google fonts quick use

Після цього перед вами з`явиться сторінка, де ви зможете вибрати потрібні вам стилі для шрифту.

Наприклад, виберемо нормальний (400) і жирний (700) стиль.

Нижче, під цифрою 3, ви можете знайти код для вставки. Я вважаю за краще вибирати підключення до файлу стилів, так що я натисну на вкладку @import. Розмістіть цей код.

Тепер створимо файл index.html з параграфом тексту.

Відео: Google Fonts і підключення до сайту

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, officia?

Підключимо нашу таблицю стилів в тезі head

Відео: Using the Google Font API

rel="Stylesheet"href="Style.css"gt;

І в таблиці стилів, на початку файлу, вставимо скопійований код.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700)-

Я вибрав шрифт Open Sans в якості прикладу. Він найперший.

Відео: CSS. Робота з текстом і шрифтами (google fonts)

На сторінці з шрифтом, під цифрою 4, ви можете знайти потрібний нам стиль. Скопіюємо його і застосуємо для нашого параграфа.

p { font-family:`Open Sans`, sans-serif-}

Усе! Тепер ви можете радіти новому шрифту!

Але не забуваємо, що ми також вибирали і жирний стиль. Щоб його застосувати, досить прописати font-weight з тим числом, яке ви вибрали на сайті. В моєму випадку - 700.

p { 
 font-family:`Open Sans`, sans-serif- 
 font-weight:700- 
}

Також, як і жирність, можна застосовувати і курсивний стиль, якщо ви його вибрали на сайті.

Відео: Шрифти Google fonts для WordPress

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

Отже, на цьому все. Дякую за увагу і до зустрічі!

Поділися в соціальних мережах:

Схожі