Шрифты в CSS настраиваются через семейство (font-family), размер (font-size), жирность (font-weight) и межстрочный интервал (line-height). Разбираем каждое свойство и объясняем как подключить Google Fonts.
Содержание
- font-family — выбор шрифта
- Как подключить Google Fonts
- @font-face — подключение локального шрифта
- font-size — размер шрифта
- font-weight — жирность шрифта
- line-height — межстрочный интервал
- font shorthand — все в одной строке
- Системный стек — без загрузки шрифтов
- Часто задаваемые вопросы о CSS шрифтах
- Какой размер шрифта использовать для основного текста?
- rem vs em — что выбрать для шрифтов?
- Как подключить шрифт без Google Fonts?
font-family — выбор шрифта
Задаётся стек шрифтов через запятую: если первый недоступен — браузер пробует следующий. В конце всегда указывается общее семейство как запасной вариант.
/* Стек шрифтов — от желаемого к запасному */
body {
font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
/* Для заголовков */
h1, h2, h3 {
font-family: 'Playfair Display', Georgia, serif;
}
/* Для кода */
code, pre {
font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}
/* Если имя шрифта содержит пробелы — в кавычках */
font-family: 'Times New Roman', serif;
font-family: 'Open Sans', sans-serif;
/* Без пробелов — без кавычек */
font-family: Arial, sans-serif;
font-family: Verdana, sans-serif;
| Общее семейство | Характеристика | Примеры шрифтов |
|---|---|---|
sans-serif | Без засечек — современный | Inter, Arial, Helvetica, Roboto |
serif | С засечками — классический | Georgia, Times New Roman, Garamond |
monospace | Моноширинный — для кода | JetBrains Mono, Fira Code, Courier |
cursive | Рукописный | Pacifico, Dancing Script |
fantasy | Декоративный | Impact, Papyrus |
Как подключить Google Fonts
Самый простой способ добавить качественный шрифт — Google Fonts. Подключается через <link> в <head> до вашего CSS файла.
<!-- В <head>, ПЕРЕД вашим style.css -->
<!-- preconnect ускоряет загрузку -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- Сам шрифт: Inter с начертаниями 400, 600, 700 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
/* В CSS используем шрифт */
body {
font-family: 'Inter', sans-serif;
}
/* Можно подключить несколько шрифтов */<!-- Несколько шрифтов в одном запросе -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">@font-face — подключение локального шрифта
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont.woff2') format('woff2'),
url('/fonts/myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap; /* показывать системный шрифт пока грузится MyFont */
}
/* Жирное начертание */
@font-face {
font-family: 'MyFont';
src: url('/fonts/myfont-bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Использование */
body { font-family: 'MyFont', sans-serif; }
strong { font-weight: 700; } /* автоматически подтянет bold начертание */
font-size — размер шрифта
/* Абсолютные единицы */
p { font-size: 16px; } /* пиксели */
p { font-size: 12pt; } /* пункты (для печати) */
/* Относительные — предпочтительны */
p { font-size: 1rem; } /* rem — от root , обычно 16px */
p { font-size: 1em; } /* em — от родителя (осторожно: накапливается) */
p { font-size: 100%; } /* то же что 1em */
/* Адаптивный шрифт через clamp */
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
/* Минимум 28px, растёт с экраном, максимум 48px */
}
/* Типичная система размеров */
html { font-size: 16px; } /* базовый */
h1 { font-size: 2.25rem; } /* 36px */
h2 { font-size: 1.875rem; } /* 30px */
h3 { font-size: 1.5rem; } /* 24px */
h4 { font-size: 1.25rem; } /* 20px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */
.xs { font-size: 0.75rem; } /* 12px */
font-weight — жирность шрифта
| Значение | Название | Использование |
|---|---|---|
100 | Thin | Декоративные заголовки |
200 | ExtraLight | Подзаголовки |
300 | Light | Основной текст на светлом фоне |
400 / normal | Regular | Основной текст (стандарт) |
500 | Medium | Навигация, метки |
600 | SemiBold | Подзаголовки, акценты |
700 / bold | Bold | Заголовки, кнопки |
800 | ExtraBold | Крупные заголовки |
900 | Black | Hero заголовки |
/* Числа (предпочтительно — явно) */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
/* Ключевые слова */
.normal { font-weight: normal; } /* = 400 */
.bold { font-weight: bold; } /* = 700 */
/* Относительные (от родителя) */
.bolder { font-weight: bolder; } /* + 1 шаг */
.lighter { font-weight: lighter; } /* - 1 шаг */
line-height — межстрочный интервал
/* Без единиц — множитель от font-size (рекомендуется) */
body { line-height: 1.6; } /* комфортно для чтения длинных текстов */
h1 { line-height: 1.2; } /* заголовки — плотнее */
h2 { line-height: 1.3; }
p { line-height: 1.6; }
/* С единицами (не рекомендуется — не масштабируется) */
p { line-height: 24px; }
p { line-height: 1.5em; }
/* Примеры для разных контекстов */
.article-body { line-height: 1.75; } /* статьи — просторно */
.card-title { line-height: 1.2; } /* заголовки карточек */
.caption { line-height: 1.4; } /* подписи */
.code-block { line-height: 1.5; } /* код */
.button { line-height: 1; } /* кнопки — без лишних отступов */
font shorthand — все в одной строке
/* font: [style] [variant] [weight] size[/line-height] family */
/* Полная запись */
p {
font: italic normal 600 18px/1.6 'Inter', sans-serif;
}
/* Минимум — размер и семейство */
p {
font: 16px Arial, sans-serif;
}
/* С межстрочным */
p {
font: 1rem/1.6 'Inter', sans-serif;
}
/* Важно: shorthand сбрасывает все не указанные свойства */
/* Лучше использовать отдельные свойства для явного контроля */
Системный стек — без загрузки шрифтов
Системный стек использует нативный шрифт операционной системы — нет запросов к Google Fonts, нет задержки загрузки. Отличный вариант для интерфейсов.
body {
font-family:
-apple-system, /* macOS/iOS: San Francisco */
BlinkMacSystemFont, /* Chrome на macOS */
'Segoe UI', /* Windows */
Roboto, /* Android */
Oxygen, /* KDE Linux */
Ubuntu, /* Ubuntu Linux */
Cantarell, /* GNOME Linux */
'Fira Sans', /* Firefox OS */
'Droid Sans', /* Старый Android */
'Helvetica Neue', /* macOS fallback */
Arial, /* Universal fallback */
sans-serif; /* Generic */
}
/* Упрощённый вариант (CSS 2021) */
body {
font-family: system-ui, sans-serif;
}
/* Для кода */
code {
font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
}
Часто задаваемые вопросы о CSS шрифтах
Какой размер шрифта использовать для основного текста?
Стандарт — 16px (1rem). Это минимальный комфортный размер для длинных текстов. Для статей и лонгридов лучше 17–18px — меньше утомляет глаза. Никогда не делай основной текст меньше 14px — это ухудшает читаемость. Для мобильных устройств 16px обязательны — иначе браузер iOS автоматически увеличивает шрифт при фокусировке на input.
rem vs em — что выбрать для шрифтов?
rem — от корневого элемента <html> (всегда предсказуем). em — от родителя (накапливается при вложенности: 1.5em внутри 1.5em = 2.25em от корня). Для font-size используй rem — не будет неожиданного накопления. Для padding, margin внутри компонента em удобен — размер масштабируется пропорционально шрифту компонента.
Как подключить шрифт без Google Fonts?
Три варианта: 1) Системный стек system-ui, sans-serif — нулевая задержка, выглядит нативно. 2) @font-face — скачай шрифт (woff2 формат) и размести на своём сервере, подключи через @font-face. 3) Другие CDN: Bunny Fonts (аналог Google Fonts без трекинга), Adobe Fonts (платный, включён в Creative Cloud), jsDelivr + npm пакеты шрифтов.
