Пошук уроків, статей та іншого контенту
Підключіть шрифти з Google Fonts і застосуйте їх до окремих елементів вебсторінки.
Google Fonts — це каталог шрифтів, які можна підключити до вебсторінки через інтернет. Після підключення шрифт можна використовувати в CSS так само, як системні шрифти.
Підключення складається з двох кроків:
Додати шрифт у HTML-файл.
Застосувати його до потрібних елементів через властивість font-family.
linkНайзручніше підключати шрифти в елементі <head> за допомогою <link>.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">У цьому прикладі підключено шрифт Roboto у двох варіантах:
400 — звичайна товщина;
700 — напівжирний шрифт.
Елемент preconnect допомагає браузеру заздалегідь встановити з'єднання із серверами Google Fonts.
Після підключення шрифту його назву можна вказати у властивості font-family:
body {
font-family: "Roboto", Arial, sans-serif;
}Запис "Roboto", Arial, sans-serif називається списком запасних шрифтів:
браузер спочатку спробує використати Roboto;
якщо він недоступний, використає Arial;
якщо і Arial недоступний, використає будь-який системний шрифт без зарубок.
Назву шрифту, що складається з кількох слів, потрібно писати в лапках.
У цьому прикладі шрифт Roboto застосовано до всього тексту, а шрифт Merriweather — лише до заголовка.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Fonts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 40px;
color: #202124;
font-family: "Roboto", Arial, sans-serif;
background-color: #f5f7fa;
}
h1 {
font-family: "Merriweather", Georgia, serif;
font-size: 36px;
}
p {
max-width: 600px;
font-size: 18px;
line-height: 1.6;
}
.important {
font-weight: 700;
}
</style>
</head>
<body>
<h1>Шрифти з Google Fonts</h1>
<p>
Цей текст використовує шрифт Roboto.
Він добре підходить для основного тексту сторінки.
</p>
<p class="important">
Цей абзац має товщину шрифту 700.
</p>
</body>
</html>У результаті:
звичайний текст сторінки буде відображатися шрифтом Roboto;
заголовок буде відображатися шрифтом Merriweather;
елемент із класом .important матиме напівжирне накреслення.
На сторінці Google Fonts можна вибрати:
назву шрифту;
потрібні накреслення;
товщини шрифту;
готовий HTML-код для підключення.
Важливо підключати лише ті товщини, які справді використовуються на сторінці. Наприклад, якщо в CSS використовується font-weight: 700, у коді підключення має бути доступна товщина 700.
.card-title {
font-weight: 700;
}Якщо підключити лише товщину 400, браузер може використати штучно потовщений варіант або показати неочікуваний результат.
У Google Fonts можна підключити кілька сімейств шрифтів в одному елементі <link>:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">Після цього шрифти можна розподілити між елементами:
body {
font-family: "Open Sans", Arial, sans-serif;
}
h1,
h2 {
font-family: "Playfair Display", Georgia, serif;
}Так можна використовувати один шрифт для основного тексту, а інший — для заголовків.
font-weightВластивість font-weight визначає товщину шрифту:
.normal-text {
font-weight: 400;
}
.bold-text {
font-weight: 700;
}Найпоширеніші значення:
400 — звичайний текст;
500 — середня товщина;
600 — напівжирний текст;
700 — жирний текст.
Значення має відповідати товщині, яку підключено в Google Fonts.
@importШрифт також можна підключити на початку CSS-файлу за допомогою @import:
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
body {
font-family: "Roboto", Arial, sans-serif;
}Однак для звичайних вебсторінок зручніше використовувати <link> у <head>, оскільки це дає браузеру змогу раніше почати завантаження шрифту.
Якщо в CSS написати назву шрифту, але не додати його до HTML або CSS, браузер використає запасний шрифт.
body {
font-family: "Roboto", Arial, sans-serif;
}Для цього прикладу Roboto має бути попередньо підключений.
Назва в font-family має точно відповідати назві підключеного шрифту.
/* Правильно */
body {
font-family: "Open Sans", sans-serif;
}
/* Неправильно, якщо підключено Open Sans */
body {
font-family: "OpenSans", sans-serif;
}Якщо використати font-weight: 700, але підключити тільки 400, потрібного накреслення може не бути.
<!-- Підключено лише звичайну товщину -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" rel="stylesheet">h1 {
font-family: "Roboto", sans-serif;
font-weight: 700;
}Потрібно підключити обидві товщини:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">Не варто вказувати лише один шрифт:
body {
font-family: "Roboto";
}Краще додавати запасні варіанти:
body {
font-family: "Roboto", Arial, sans-serif;
}Якщо Google Fonts тимчасово недоступний або шрифт ще не завантажився, браузер зможе використати інший шрифт.
Шрифт із Google Fonts можна підключити через <link> у <head>.
Після підключення шрифт застосовується через font-family.
Для різних елементів можна використовувати різні шрифти.
Потрібні товщини шрифту слід підключати заздалегідь.
До font-family варто додавати запасні шрифти.
Назва шрифту в CSS має точно відповідати його назві в підключенні.