Способы подключения шрифтов
1. Системные шрифты
Использование шрифтов, уже установленных на устройстве пользователя.
/* CSS */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
Пример текста с системным шрифтом
2. Google Fonts (внешние шрифты)
Подключение через сервис Google Fonts с помощью тега <link> в HTML.
<!-- HTML -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
/* CSS */
body {
font-family: 'Roboto', sans-serif;
}
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
/* CSS */
body {
font-family: 'Roboto', sans-serif;
}
Пример текста с шрифтом Roboto из Google Fonts
3. Локальные шрифты (через @font-face)
Загрузка файлов шрифтов на ваш сервер и подключение через правило @font-face.
/* CSS */
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyFont', sans-serif;
}
@font-face {
font-family: 'MyFont';
src: url('fonts/myfont.woff2') format('woff2'),
url('fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body {
font-family: 'MyFont', sans-serif;
}
Пример текста с локально подключенным шрифтом Pacifico
Примеры различных шрифтов
Roboto Light
Съешь же ещё этих мягких французских булок, да выпей чаю.
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-weight: 300;
Roboto Regular
Съешь же ещё этих мягких французских булок, да выпей чаю.
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-weight: 400;
Roboto Bold
Съешь же ещё этих мягких французских булок, да выпей чаю.
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-weight: 700;
Lobster (декоративный)
Съешь же ещё этих мягких французских булок, да выпей чаю.
font-family: 'Lobster', cursive;
Open Sans
Съешь же ещё этих мягких французских булок, да выпей чаю.
font-family: 'Open Sans', sans-serif;
font-weight: 600;
font-weight: 600;
Monospace (моноширинный)
Съешь же ещё этих мягких французских булок, да выпей чаю.
font-family: 'Courier New', monospace;
Важные замечания:
1. Всегда указывайте резервные (fallback) шрифты на случай, если основной шрифт не загрузится.
2. Для кириллических текстов убедитесь, что шрифт поддерживает кириллицу.
3. Оптимизируйте загрузку шрифтов с помощью свойств font-display и preload.
4. Не используйте слишком много разных шрифтов на одной странице (2-3 обычно достаточно).
Код для быстрого старта
Минимальный пример подключения шрифта из Google Fonts:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-weight: 700;
}
</style>
</head>
<body>
<h1>Заголовок с жирным шрифтом</h1>
<p>Обычный текст с регулярным начертанием</p>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Мой сайт</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
h1 {
font-weight: 700;
}
</style>
</head>
<body>
<h1>Заголовок с жирным шрифтом</h1>
<p>Обычный текст с регулярным начертанием</p>
</body>
</html>