Если вы не хотите использовать стандартные шрифты, вы можете использовать шрифты Google.
Google предоставляет более 1000 самых разнообразных шрифтов и все они полностью беcплатны.
Как использовать шрифты Google
Чтобы подключить шрифт Google, достаточно добавить ссылку подключения файла таблицы стилей в секции <head> и определить этот шрифт в своих стилях CSS.
В следующем примере мы подключаем и затем используем шрифт Google с именем "Sofia":
<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
В следующем примере мы подключаем и затем используем шрифт Google с именем "Trirong":
<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
В следующем примере мы подключаем и затем используем шрифт Google с именем "Audiowide":
<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, просто разделите имена шрифтов вертикальной чертой ( | ).
В следующем примере подключается несколько шрифтов 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>
Внимание! Загрузка большого количества шрифтов Google может замедлить вашу веб-страницу. Будьте с этим осторожны!
Стилизация шрифтов Google
Конечно же вы можете стилизовать шрифты Google также как и стандартные шрифты!
В следующем примере тексту, написанному шрифтом "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: 3px 3px 3px #ababab;
}
</style>
</head>
Результат:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Подключение к шрифтам различных эффектов
Google позволяет вместе с шрифтами также подключить к ним различные визуальные эффекты.
Сначала в теге подключения шрифта нужно добавить строку effect=имяэффекта, а затем в элемент, где будет использоваться этот эффект нужно добавить специальный класс. Этот класс всегда начинается с font-effect-, к которому добавляется имяэффекта.
В следующем примере добавляется эффект огня к шрифту "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 on Fire</h1>
</body>
Результат:
Sofia on Fire
Чтобы подключить к шрифтам Google сразу несколько эффектов, просто разделите их имена вертикальной чертой ( | ).
В следующем примере добавляется несколько эффектов к шрифту "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">Neon Effect</h1>
<h1 class="font-effect-outline">Outline Effect</h1>
<h1 class="font-effect-emboss">Emboss Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
Результат:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect
