CSS Google шрифти
Google шрифти
Якщо ви не хочете використовувати будь-які стандартні шрифти в HTML, ви можете використовувати Google шрифти.
Google шрифти можна використовувати безплатно, і ви можете обрати з більш ніж 1000 шрифтів.
Як використовувати Google шрифти
Просто додайте посилання на спеціальну таблицю стилів в розділі <head>, а потім зверніться до шрифту в CSS.
Приклад
Тут ми використовуємо шрифт під назвою "Sofia" із Google шрифтів:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Результат:
Sofia Font
Lorem ipsum dolor sit amet.
Вітаємо Вас! Ми з України!
123456790
Спробуйте самі »
Приклад
Тут ми використовуємо шрифт під назвою "Trirong" із Google шрифтів:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Результат:
Trirong Font
Lorem ipsum dolor sit amet.
Вітаємо Вас! Ми з України!
123456790
Спробуйте самі »
Приклад
Тут ми використовуємо шрифт під назвою "Audiowide" із Google Fonts:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Результат:
Audiowide Font
Lorem ipsum dolor sit amet.
Вітаємо Вас! Ми з України!
123456790
Спробуйте самі »
Примітка: При вказуванні шрифту в CSS завжди вказуйте хоча б один резервний шрифт (щоб уникнути неочікуваної поведінки). Таким чином, необхідно додати загальне сімейство шрифтів (наприклад, serif або sans-serif) в кінець списку.
Щоб переглянути список всіх доступних Google шрифтів, відвідайте підручник Google шрифти на нашому сайті W3Schools українською.
Використання кількох Google-шрифтів
Щоб використовувати кілька Google-шрифтів, просто розділіть назви шрифтів вертикальною рискою (|), як тут:
Приклад
Запросити кілька шрифтів:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Результат:
Audiowide Font
Sofia Font
Trirong Font
Спробуйте самі »
Примітка: Запит кількох шрифтів може уповільнити роботу ваших вебсторінок! Так що будьте обережні з цим.
Стилізація Google шрифтів
Звісно, ви можете стилізувати Google-шрифти на свій розсуд за допомогою CSS!
Приклад
Стиль шрифту "Sofia":
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 2px 2px 2px #ababab;
}
</style>
</head>
Результат:
Sofia шрифт
Lorem ipsum dolor sit amet.
Вітаємо Вас! Ми з України!
123456790
Спробуйте самі »
Включення ефектів шрифту
Google також включив різні ефекти шрифтів, які ви можете використовувати.
Спочатку додайте effect=effectname до Google API, потім додайте і’мя спеціального класу до елементу, який буде використовувати спеціальний ефект. Ім’я класу завжди починається з font-effect- і закінчується з effectname.
Приклад
Додайте ефект вогню до шрифту "Sofia":
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia у вогні</h1>
</body>
Результат:
Sofia у вогні
Спробуйте самі »
Щоб запросити кілька ефектів шрифту, просто розділіть імена ефектів вертикальною рискою (|), як тут:
Приклад
Додайте кілька ефектів до шрифту "Sofia":
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Неоновий ефект</h1>
<h1 class="font-effect-outline">Ефект контуру</h1>
<h1 class="font-effect-emboss">Ефект тиснення</h1>
<h1 class="font-effect-shadow-multiple">Ефект множинної тіні</h1>
</body>
Результат:
Неоновий ефект
Ефект контуру
Ефект тиснення
Ефект множинної тіні
Спробуйте самі »
Примітка. Google-шрифти будуть працювати тільки якщо ви підключені до Інтернету. Якщо ви не підключені до Інтернету, то посилання на сайт Google-шрифтів працювати не будуть. В такому випадку, щоб Google-шрифти працювали офлайн, необхідно буде їх попередньо скачати із сайту Google та розмістити на своєму сайті у відповідній теці. І вже потім посилатись на необхідні Google-шрифти на своїх вебсторінках.
Всі Google шрифти доступні на сайті Google за посиланням https://fonts.google.com/.
