Когда я только начинал верстать сайты, мои заказчики часто просили «сделать красиво, как у тех ребят». Я открывал их сайт, видел необычный шрифт, лез в код и обнаруживал, что там подключены какие-то файлы с расширением .woff или .ttf. Тогда я думал: «Это какая-то магия». Спустя десять лет я понял: магии нет, есть правильный подход к подключению шрифтов и иконок. В этой статье я расскажу, как сделать сайт запоминающимся с помощью типографики и иконок, не превратив его в «тяжеловоза», который грузится вечность.
Почему стандартных шрифтов мало
Системные шрифты вроде Arial или Times New Roman — это как офисная одежда: удобно, привычно, но скучно. Ваш сайт может быть наполнен гениальным контентом, но если он набран стандартным шрифтом, пользователь подсознательно воспринимает его как шаблонный. Кастомный шрифт — это как фирменный костюм: он выделяет вас из толпы и подчеркивает стиль.
Но зачем вообще заморачиваться? Дело в том, что шрифт передает настроение. Например, округлые шрифты с мягкими линиями вызывают доверие и дружелюбие, а строгие гротески — надежность и профессионализм. Иконки же помогают пользователю быстро считывать информацию: иконка корзины понятна без слов, иконка лупы — это поиск. Вместе они создают целостный пользовательский опыт.
Однако подключение кастомных шрифтов — это не просто «закинул файл на сервер и прописал в CSS». Есть нюансы: форматы, вес, оптимизация загрузки. Если не разобраться, можно получить сайт, который грузится как в 90-е. Давайте разбираться.
Как подключить шрифт: от простого к сложному
Самый простой способ — использовать Google Fonts. Выбираете шрифт, копируете ссылку, вставляете в HTML. Вот пример:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Этот код подключает шрифт Roboto с начертаниями 400 (обычное) и 700 (жирное). Параметр display=swap означает, что браузер сначала покажет системный шрифт, а потом заменит его на кастомный, когда тот загрузится. Это называется FOUT (Flash of Unstyled Text).
Но что если нужен нестандартный шрифт, которого нет в Google Fonts? Тогда придется использовать @font-face в CSS. Выглядит это так:
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
font-weight: 400;
font-style: normal;
}
Здесь мы говорим браузеру: «Слушай, у меня есть шрифт MyFont, он лежит в файлах myfont.woff2 и myfont.woff. Если браузер поддерживает WOFF2 — используй его, если нет — бери WOFF». Формат WOFF2 — это сжатый шрифт, который весит меньше, чем TTF или OTF, и поддерживается всеми современными браузерами.
Лайфхак: Всегда подключайте шрифт в формате WOFF2, а для старых браузеров — WOFF. TTF и OTF используйте только как запасной вариант, если нет других. Это сократит вес шрифта в 2-3 раза.
Важно: если вы используете несколько начертаний (например, 400, 700, 900), для каждого нужно прописать свой @font-face. Иначе браузер будет искусственно «жирнить» обычный шрифт, и результат будет выглядеть ужасно.
Иконки: от картинок к шрифтам и SVG
Раньше я использовал иконки как обычные картинки: вставил PNG с прозрачным фоном — и радуйся. Но у такого подхода есть минусы: картинки не масштабируются без потери качества, весят много, и их сложно менять программно. Поэтому современные разработчики используют иконочные шрифты или SVG-спрайты.
Иконочные шрифты — это шрифты, в которых вместо букв находятся иконки. Например, библиотека Font Awesome. Подключаете шрифт, а в HTML вставляете тег <i> с классом, который определяет конкретную иконку. Вот пример:
<!-- Подключение CSS с иконочным шрифтом -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Использование иконки -->
<i class="fas fa-home"></i>
Плюсы иконочных шрифтов: они легкие, легко меняют цвет через CSS, масштабируются без потери качества. Минусы: если на сайте используется много разных иконок, шрифт может весить прилично. Но это решается подключением только нужных иконок через специальные сервисы.
Более современный подход — использование SVG-спрайтов. SVG — это векторный формат, который описывает картинку с помощью XML-кода. Вы создаете один файл со спрайтом, в котором собраны все иконки, а затем в HTML используете тег <svg> с ссылкой на нужный элемент:
<svg style="width: 24px; height: 24px;">
<use href="sprite.svg#icon-home"></use>
</svg>
Преимущества SVG: лучше контролируется размер, можно анимировать, иконки не зависят от шрифта (не будет проблем с загрузкой). Но есть и сложность: нужно уметь готовить спрайт.
Оптимизация загрузки: чтобы сайт не тормозил
Главная боль с кастомными шрифтами — это вес. Один шрифт с несколькими начертаниями может весить 200-300 КБ, а если подключить 3-4 шрифта — сайт станет тяжелым. Что делать?
Во-первых, используйте только нужные начертания. Если для заголовков нужен жирный, а для текста — обычный, не подключайте все 9 вариантов. Во-вторых, применяйте современные форматы (WOFF2). В-третьих, используйте атрибут font-display в CSS, чтобы контролировать поведение браузера во время загрузки.
Вот таблица форматов шрифтов и их характеристик, чтобы вы могли быстро сориентироваться:
| Формат | Сжатие | Поддержка браузеров | Когда использовать |
|---|---|---|---|
| WOFF2 | Лучшее (сжатие до 30% от TTF) | Все современные | Основной формат |
| WOFF | Хорошее | Все, включая IE11 | Для старых браузеров |
| TTF/OTF | Нет | Почти все, но не поддерживается в некоторых мобильных | Как запасной вариант |
| EOT | Среднее | Только IE | Не нужен, если не поддерживаете IE |
Еще один способ ускорить загрузку — использовать подмножества шрифтов. Это когда вы включаете в файл только те символы, которые нужны для вашего языка. Например, для кириллицы и латиницы создаются разные файлы. Сервисы вроде Fontsquirrel позволяют сгенерировать такие подмножества.
Инструменты для работы с иконками
Когда я работаю с иконками, я использую несколько инструментов, которые экономят время. Вот список моих фаворитов:
- Font Awesome — самая популярная библиотека иконок. Бесплатная версия содержит тысячи иконок, есть платная с дополнительными стилями.
- IcoMoon — сервис, который позволяет выбрать нужные иконки из библиотеки и скачать их в виде шрифта или SVG-спрайта. Очень удобно, чтобы не тянуть весь набор.
- Feather Icons — набор простых иконок в виде SVG. Отлично подходит для минималистичных дизайнов.
- SVG Sprites Generator — онлайн-инструменты, которые собирают все ваши SVG-иконки в один файл. Например, svgsprit.es.
Для проверки, как шрифт ведет себя на разных устройствах, я использую Chrome DevTools. Там можно эмулировать медленное соединение и увидеть, когда появляется текст. Это помогает понять, нужно ли что-то оптимизировать.
Правило: Не используйте более двух-трех семейств шрифтов на сайте. Один для заголовков, один для текста, максимум — один для акцентов. Иначе сайт будет выглядеть как лоскутное одеяло и грузиться дольше.
Практический пример: подключаем шрифт и иконки вместе
Давайте соберем все вместе. Представьте, что вы делаете сайт для кофейни. Вы выбрали шрифт Playfair Display для заголовков и Inter для текста. Для иконок решили использовать Font Awesome. Вот как будет выглядеть подключение:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Кофейня «Уют»</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body { font-family: 'Inter', sans-serif; }
h1 { font-family: 'Playfair Display', serif; }
.icon { font-size: 24px; color: #6b4f3a; }
</style>
</head>
<body>
<h1>Добро пожаловать в «Уют»</h1>
<p>Мы варим кофе с любовью.</p>
<span class="icon"><i class="fas fa-coffee"></i></span>
</body>
</html>
В этом примере мы подключаем шрифты через Google Fonts, а иконки — через CDN. Обратите внимание, что в CSS мы явно указываем, какой шрифт для чего используется. Это важно, чтобы браузер не путал.
Если вы хотите использовать SVG-иконки, то код будет чуть сложнее, но и гибче. Например, вы можете менять цвет иконки при наведении через CSS.
Что в итоге
Кастомные шрифты и иконки — это мощный инструмент, который делает ваш сайт уникальным и удобным. Но с ними нужно обращаться аккуратно. Помните о весе файлов, подключайте только нужные начертания, используйте современные форматы и не забывайте про запасные варианты для старых браузеров.
Начните с малого: попробуйте подключить один шрифт через Google Fonts и замените стандартные иконки на Font Awesome. Вы увидите, как изменится восприятие сайта. А когда освоитесь, переходите на SVG-спрайты и оптимизацию.
Веб-дизайн — это не только сетки и цвета, но и детали. Хороший шрифт и правильная иконка могут сказать больше, чем любой текст. Так что экспериментируйте, но с умом.
