Если вы когда-нибудь пытались сделать сайт непохожим на тысячи других, то наверняка сталкивались с проблемой: стандартные шрифты и иконки выглядят скучно. Хочется добавить индивидуальности, но как это сделать правильно, чтобы сайт не превратился в тормозящий монстр? В этой статье я расскажу, как подключать кастомные шрифты и иконки так, чтобы они радовали глаз и не убивали производительность. Вы узнаете про форматы, способы подключения и типичные ошибки, которые допускают даже опытные разработчики.

Digital-студия WNDER

Зачем вообще нужны кастомные шрифты и иконки

Стандартный набор шрифтов (Arial, Times New Roman, Courier) и иконок (стрелочки, галочки) — это как офисный костюм: удобно, но скучно. Кастомные шрифты и иконки позволяют выделиться, создать уникальный стиль бренда, улучшить читаемость (если шрифт подобран правильно) и даже повысить доверие пользователей. Но главное — они делают интерфейс живым и запоминающимся.

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

Форматы шрифтов и иконок: что выбирать

Шрифты бывают в разных форматах, и каждый имеет свои особенности. Вот основные:

Формат Поддержка браузеров Когда использовать
WOFF2 Все современные Основной формат для веба. Лучшее сжатие, высокая скорость
WOFF Почти все, кроме старых IE Для старых браузеров, если нужна поддержка
TTF/OTF Почти все Универсальный, но тяжелее WOFF
SVG Не поддерживается в Chrome и Firefox Лучше не использовать для шрифтов, только для иконок

Для иконок есть два основных подхода: использовать шрифтовые иконки (например, Font Awesome) или SVG-иконки. Шрифтовые иконки — это по сути шрифт, где каждая буква — иконка. SVG-иконки — это векторные изображения, которые можно встраивать прямо в HTML или подключать как спрайты.

Мой совет: для иконок предпочитайте SVG. Они легче, масштабируются без потери качества и не ломаются при изменении размера шрифта. Но если вам нужно быстро подключить набор иконок, шрифтовые тоже подойдут.

Как подключить кастомный шрифт: пошаговый рецепт

Самый простой способ — использовать сервис Google Fonts. Вы выбираете шрифт, копируете ссылку и вставляете в HTML. Но если вам нужен уникальный шрифт (например, купленный у дизайнера), придётся подключать его вручную. Вот как это делается.

Сначала положите файлы шрифта в папку вашего проекта (например, fonts/). Затем объявите шрифт в CSS с помощью @font-face. Вот пример:

@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;
}

Что здесь важно:

  • font-family — имя, которое вы будете использовать в других стилях.
  • src — пути к файлам. Указывайте несколько форматов для разных браузеров.
  • font-weight и font-style — если у вас несколько начертаний, объявляйте каждое отдельно.
  • font-display: swap — это лайфхак: текст сначала показывается системным шрифтом, а когда кастомный загрузится — заменяется. Это ускоряет отображение.

После объявления просто используйте шрифт в стилях:

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

Не забывайте указывать запасной шрифт (fallback) — если кастомный не загрузится, страница всё равно будет выглядеть прилично.

Иконки: подключение и использование

Теперь поговорим об иконках. Самый распространённый способ — использовать готовый набор, например, Font Awesome или Material Icons. Подключение простое: добавляете CSS-файл в <head> и используете классы. Вот пример для Font Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<i class="fas fa-user"></i>

Но если вам нужны уникальные иконки, лучше использовать SVG. Создайте спрайт — один файл со всеми иконками, и подключайте его через <use>. Вот как это выглядит:

<svg style="display:none">
    <symbol id="icon-user" viewBox="0 0 24 24">
        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
    </symbol>
</svg>

<svg>
    <use href="#icon-user"></use>
</svg>

Преимущества SVG-иконок: они не зависят от шрифта, не теряют чёткость при масштабировании и позволяют менять цвет через CSS (свойство fill).

Оптимизация: чтобы сайт не тормозил

Главная проблема кастомных шрифтов и иконок — вес. Особенно это касается шрифтов с множеством начертаний (жирный, курсив, тонкий). Вот несколько правил, которые помогут сохранить скорость:

  • Используйте не больше двух-трёх семейств шрифтов на сайт.
  • Выбирайте только нужные начертания — не подключайте все сразу.
  • Для иконок используйте SVG-спрайты вместо шрифтовых наборов — они легче.
  • Включайте сжатие gzip или brotli на сервере — это уменьшит размер файлов.
  • Загружайте шрифты асинхронно, чтобы они не блокировали рендеринг страницы.
Правило: Всегда проверяйте, как ваш сайт выглядит без кастомных шрифтов. Используйте fallback-шрифты, чтобы контент оставался читаемым даже при медленном интернете.

Также не забывайте про font-display: swap — это одна из лучших практик для шрифтов. Она позволяет тексту отображаться сразу, а шрифт подгружается постепенно.

Частые ошибки и как их избежать

Даже опытные разработчики иногда наступают на грабли. Вот типичные ошибки при работе с кастомными шрифтами и иконками:

Ошибка Последствие Решение
Подключение всех начертаний шрифта Сайт грузится медленно Оставьте только нужные веса
Использование шрифтовых иконок без необходимости Лишний вес и конфликты с CSS Переходите на SVG
Забыли про fallback Текст не отображается, если шрифт не загрузился Добавьте системные шрифты в стек
Игнорирование font-display Блокировка рендеринга Установите swap

Если вы используете иконки из библиотеки, убедитесь, что подключаете только нужные. Например, Font Awesome позволяет выбирать отдельные иконки через CSS-фильтры, но это сложнее. Лучше использовать SVG-спрайты — они легче и гибче.

Что в итоге

Кастомные шрифты и иконки — это мощный инструмент для создания уникального дизайна. Главное — подходить к ним с умом. Используйте современные форматы (WOFF2), подключайте только нужные начертания, отдавайте предпочтение SVG-иконкам и не забывайте про оптимизацию. Следуя этим советам, вы получите красивый и быстрый сайт, который будет радовать и вас, и пользователей.

Помните: шрифты и иконки — это аксессуары, а не основа. Не перегружайте ими страницу, и всё будет отлично.

Материал подготовлен студией WNDER.