W3.CSS Google шрифти
За допомогою W3.CSS дуже легко додавати нові шрифти.
- Дуже просто у використанні (тільки CSS та HTML)
- Необмежене використання зовнішніх бібліотек шрифтів (наприклад, Google Fonts)
- Працює в усіх сучасних браузерах
Це шрифт Roboto
Це шрифт Sofia
Це шрифт Sofia у вогні
Створюємо красивий Web!
Створюємо цікавий Web!
Шрифт з ефектом тіні!
Шрифт Allerta!
Allerta на чорному фоні!
Примітка. Деякі шрифти українською мовою (кирилицею) можуть не відображатися вказаним Google-шрифтом, так як вони на даний момент не підтримуються. Відображаються лише ті шрифти, які підтримуються Google (в основному латиницею).
Використання Google шрифтів на вебсайтах
Google Fonts можна використовувати безкоштовно, і в них є більше 1000 шрифтів на вибір.
В заголовку своєї вебсторінки додайте посилання на потрібний Google-шрифт:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
Потім додайте CSS із вказівкою, де на сторінці використовувати цей шрифт:
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
Спробуйте самі »
Примітка. Майте на увазі, якщо ви вказуєте посилання на шрифт лише на сайт https://fonts.googleapis.com/, і шрифт Google не знаходиться безпосередньо на вашому сайті, то при будь-яких проблемах із роботою сайту Google Fonts дані шрифти можуть не відображатися належним чином. Також якщо ви переглядаєте свій сайт локально (на локальному сервері або на своєму комп’ютері при відключеному Інтернеті, то шрифти від Google також не будуть відображатись!
Інший приклад
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
Спробуйте самі »
Створення класу шрифта
В заголовку вебсторінки розмістіть посилання на Google-шрифт:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sophia">
Потім створіть клас шрифту:
Приклад
.w3-sofia {
font-family: Sofia, cursive;
}
На вебсторінці використовуйте клас шрифту:
Приклад
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">Making the Web Beautiful!</p>
Спробуйте самі »
Приклад
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Спробуйте самі »
Приклад
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Спробуйте самі »
Приклад
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Спробуйте самі »
