НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ
W3CSS. W3Schools українською. Уроки для початківців

En

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;
}

На вебсторінці використовуйте клас шрифту:

Приклад

<p class="w3-sofia">Making the Web!</p>
Спробуйте самі »
Making the Web!

Приклад

<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>
Спробуйте самі »
Making the Web!

Приклад

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">
Спробуйте самі »
Making the Web!

Приклад

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
Спробуйте самі »
Making the Web!

Приклад

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">
Спробуйте самі »
Making the Web!