В прошлой лекции мы разобрали основные свойства текста. Теперь посмотрим, откуда брать шрифты для сайта и как их подключать.

1. Системные шрифты и их типы

Каждый компьютер имеет набор предустановленных шрифтов. Разные операционные системы имеют разные наборы. Поэтому в CSS принято перечислять несколько шрифтов, а в конце указывать тип.

Типы шрифтов (семейства):

• serif — шрифты с засечками (Times New Roman, Georgia)
• sans-serif — шрифты без засечек (Arial, Helvetica, Roboto)
• monospace — моноширинные шрифты (Courier New, Consolas)
• cursive — рукописные шрифты (Comic Sans MS)
• fantasy — декоративные шрифты (Impact)

body {
    font-family: Arial, Helvetica, sans-serif;
}

2. Запасные шрифты (fallback)

Вы перечисляете несколько шрифтов через запятую. Если первый не найден, браузер пробует второй, затем третий. В конце обязательно указывают тип шрифта (serif, sans-serif и т.д.).

h1 {
    font-family: 'Roboto', 'Arial', sans-serif;
}

3. Где брать шрифты для сайта

Популярные сервисы (бесплатно):

• Google Fonts — крупнейший каталог веб-шрифтов (много латиницы, есть кириллица)
• Font Squirrel — качественные шрифты с открытыми лицензиями
• FontSpace — большая библиотека бесплатных шрифтов
• DaFont — огромный каталог (внимание с лицензиями)

Российские сервисы:

• Вшрифте — каталог кириллических шрифтов
• Шрифты.рф — русскоязычная библиотека
• MyFonts (раздел кириллицы) — профессиональные шрифты (есть платные)

4. Подключение шрифтов через @font-face

Если вы скачали файл шрифта (.woff2, .woff, .ttf), его можно подключить через правило @font-face.

Форматы для веба (от лучшего к худшему):

• WOFF2 — самый современный и лёгкий
• WOFF — предшественник WOFF2, тоже сжатый
• TTF/OTF — для установки на компьютер, для сайта можно, но не оптимально (тяжёлые)

@font-face {
    font-family: 'Great Vibes';
    src: url('/fonts/great-vibes.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.special-header {
    font-family: 'Great Vibes', cursive;
}

5. Как получить готовый WOFF2

Не все шрифты сразу доступны в веб-форматах. Есть несколько способов:

• Скачать с сервиса, где есть @font-face kit — Font Squirrel часто даёт готовые архивы с веб-форматами
• Конвертировать онлайн — например, convertio.co или onlinefontconverter.com (из TTF/OTF в WOFF2)
• Использовать API Google Fonts — Google сам отдаст браузеру оптимальный формат

6. Практический пример: Great Vibes

Мы скачали шрифт Great Vibes в формате WOFF2 и положили в папку /fonts/. Теперь подключим его:

@font-face {
    font-family: 'Great Vibes';
    src: url('/fonts/great-vibes.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

h1 {
    font-family: 'Great Vibes', cursive;
    font-size: 2rem;
}