W3.CSS Google Шрифты
С W3.CSS очень легко добавлять новые шрифты.
- Очень прост в использовании (только CSS и HTML)
- Неограниченное использование внешних библиотек шрифтов (например, Google Fonts)
- Работает во всех современных браузерах
это робото
Это София
София в огне
Делаем сеть!
Делаем сеть!
Делаем сеть!
Делаем сеть!
Делаем сеть!
Использование шрифтов 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>
Делаем сеть!
Пример
<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">
Делаем сеть!