ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ
W3CSS. Уроки для начинающих

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;}
Попробуйте сами »

Другой пример

<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!