Шрифты Google
Если вы не хотите использовать стандартные шрифты HTML, можно использовать шрифты Google.
Шрифты Google бесплатны и предлагают более 1000 шрифтов на выбор.
Как использовать шрифты Google
Добавьте специальную таблицу стилей <link> в секции <head>, затем сошлитесь на шрифт в своём CSS.
Примечание: Всегда указывайте хотя бы один резервный шрифт, например общий serif или sans-serif, в конце, чтобы избежать неожиданных результатов.
Sofia
Использует шрифт Google Sofia для страницы.
Prompt
HTML-страница, использующая шрифт Google «Sofia».
В
<head> добавьте <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">, затем внутренний блок <style>, задающий свойству font-family элемента body значение "Sofia", sans-serif. Добавьте заголовок, строку текста и несколько цифр.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Trirong
Использует шрифт Google Trirong для страницы.
Prompt
HTML-страница, использующая шрифт Google «Trirong».
В
<head> добавьте <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">, затем внутренний блок <style>, задающий свойству font-family элемента body значение "Trirong", serif. Добавьте заголовок, строку текста и несколько цифр.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
<body>
<h1>Trirong Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Audiowide
Использует шрифт Google Audiowide для страницы.
Prompt
HTML-страница, использующая шрифт Google «Audiowide».
В
<head> добавьте <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">, затем внутренний блок <style>, задающий свойству font-family элемента body значение "Audiowide", sans-serif. Добавьте заголовок, строку текста и несколько цифр.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
<body>
<h1>Audiowide Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Использование нескольких шрифтов Google
Чтобы использовать несколько шрифтов Google, разделите названия шрифтов символом вертикальной черты (|) в ссылке.
Примечание: Запрос многих шрифтов может замедлить загрузку страниц, так что будьте осторожны.
Пример
Три шрифта запрашиваются в одной ссылке и используются на трёх заголовках.
Prompt
HTML-страница, запрашивающая сразу несколько шрифтов Google.
В
<head> добавьте <link> на https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong (названия шрифтов разделены вертикальной чертой), затем оформите три класса заголовков (a, b, c) шрифтами Audiowide, Sofia и Trirong. Добавьте по одному заголовку каждого класса.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<body>
<h1 class="a">Audiowide Font</h1>
<h1 class="b">Sofia Font</h1>
<h1 class="c">Trirong Font</h1>
</body>
</html>
Оформление шрифтов Google
Вы можете оформлять шрифты Google с помощью CSS так же, как и любой другой шрифт.
Пример
Шрифту Sofia задаются больший размер и тень текста.
Prompt
HTML-страница, оформляющая шрифт Google дополнительным CSS.
В
<head> подключите шрифт Google Sofia, затем в блоке <style> задайте body шрифт "Sofia", sans-serif, размер шрифта 30px и тень текста (text-shadow) 3px 3px 3px #ababab. Добавьте заголовок, строку текста и несколько цифр.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>1234567890</p>
</body>
</html>
Включение эффектов шрифта
Google также предлагает эффекты шрифта. Сначала добавьте effect=имяэффекта к ссылке Google, затем добавьте класс к элементу. Имя класса всегда начинается с font-effect- и заканчивается названием эффекта.
Чтобы использовать несколько эффектов, разделите их названия символом вертикальной черты (|).
Эффект Fire
Эффект fire добавлен к шрифту Sofia.
Prompt
HTML-страница, добавляющая эффект шрифта Google «fire».
В
<head> подключите https://fonts.googleapis.com/css?family=Sofia&effect=fire, задайте body шрифт "Sofia", sans-serif размером 30px, затем добавьте <h1> с классом "font-effect-fire".
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</html>
Несколько эффектов
Несколько эффектов (neon, outline, emboss и multiple shadow) запрашиваются одновременно.
Prompt
HTML-страница, добавляющая сразу несколько эффектов шрифта Google.
В
<head> подключите https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple (эффекты разделены вертикальной чертой), задайте body шрифт "Sofia", sans-serif размером 30px, затем добавьте четыре заголовка с классами font-effect-neon, font-effect-outline, font-effect-emboss и font-effect-shadow-multiple.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</html>