Иконочные шрифты против SVG: почему проекты уходят с Font Awesome

Иконка-корзина внезапно превращается в квадрат с крестиком или в китайский иероглиф — почти каждый, кто верстал сайт на Font Awesome или Glyphicons, это видел. Причина не в вашем коде: иконочный шрифт по своей природе рендерится как текст, а браузер имеет полное право подставить символ из другого шрифта, если основной не догрузился или упал в fallback. SVG так себя не ведёт. Разберём, чем иконочные шрифты отличаются от SVG на уровне рендеринга, доступности и производительности, и в каких случаях переход с одного на другое реально стоит потраченного времени.

Как работают оба подхода

Иконочный шрифт — это обычный шрифтовой файл (WOFF2, TTF), где вместо букв в глифы зашиты иконки. Вы подключаете шрифт через @font-face и выводите иконку либо псевдоэлементом с content, либо специальным символом. Браузер обрабатывает иконку как глиф текста: применяет color, font-size, антиалиасинг.

SVG — векторная графика в разметке. Иконку вставляют одним из способов: инлайн прямо в HTML (<svg>...</svg>), через <img>, через background-image в CSS или ссылкой на символ в SVG-спрайте (<use>). Браузер рисует иконку как графику, а не как текст.

Разница на первый взгляд косметическая, но именно она определяет всё поведение дальше.

Где иконочные шрифты ломаются

Fallback-глиф вместо иконки

Если WOFF2 не догрузился (медленная сеть, блокировщик, ошибка CDN), браузер показывает не пустое место, а символ из fallback-шрифта по тому же коду. Отсюда квадраты и случайные иероглифы вместо иконок. SVG в таком сценарии либо покажется, либо не покажется — но чужого символа на его месте не будет.

Антиалиасинг и субпиксельный рендеринг

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

Доступность

Псевдоэлемент ::before с content: "\f007" для скринридера — это текстовый символ из области Private Use Area¹. Программа чтения экрана может прочитать его как непонятный символ или проигнорировать. С инлайновым SVG вы управляете доступностью явно: aria-hidden="true" для декоративной иконки или role="img" с <title> для смысловой.

Один цвет на всю иконку

Глиф красится свойством color целиком. Многоцветную иконку в шрифт не завернёшь (цветные шрифты вроде COLR существуют, но поддержка и инструменты сырые). SVG красит любой путь отдельно, поддерживает градиенты и анимацию частей.

Иконочный шрифт удобен ровно до того момента, пока один битый запрос к CDN не превращает всю панель навигации в набор квадратов — а пользователь при этом уверен, что сломался ваш сайт, а не чужой шрифт.

Где иконочные шрифты пока выигрывают

Не всё однозначно. Иконочный шрифт даёт несколько реальных плюсов:

• Один HTTP-запрос на весь набор. Тысяча иконок — один файл. При инлайн-SVG каждая иконка раздувает HTML, при отдельных файлах — плодит запросы (частично решается спрайтом и HTTP/2).
• Масштабирование как у текста. Иконка наследует font-size от родителя и выравнивается по базовой линии текста без возни с vertical-align.
• Простота подключения. Класс на элемент — и иконка на месте. Не нужен билд-шаг для сборки спрайта или инлайна.
• Совместимость со старыми браузерами. Если проект обязан работать в очень старом окружении, шрифты предсказуемее части SVG-техник.

Сравнение по ключевым параметрам

Как выглядит SVG-спрайт на практике

Самый близкий к иконочному шрифту способ по удобству — SVG-спрайт с <symbol> и <use>. Один файл на набор, ссылки по id. Спрайт кладут в начало <body> или подключают внешним файлом.

<!-- Спрайт: один раз в разметке или отдельным файлом -->
<svg width="0" height="0" style="position:absolute">
  <symbol id="icon-cart" viewBox="0 0 24 24">
    <path d="M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
    <path d="M1 2v2h2l3.6 7.6-1.35 2.45c-.16.3-.25.66-.25 1.05 0 1.1.9 2 2 2h12v-2H7.42a.25.25 0 0 1-.25-.25l.03-.12L8.1 15h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49L19.13 7l-3.16 5.72-.1.03H8.53L4.27 4H22V2H1z"/>
  </symbol>
</svg>

<!-- Использование иконки в любом месте страницы -->
<button aria-label="Корзина">
  <svg class="icon" aria-hidden="true">
    <use href="#icon-cart"></use>
  </svg>
</button>

Цвет здесь наследуется, если в path задать fill="currentColor" или убрать явный fill и управлять через CSS-свойство fill на классе .icon. Размер — через width/height или font-size при width: 1em. Атрибут xlink:href устарел — используйте href; для очень старых движков иногда оставляют оба.

Инвалидация кеша спрайта и настройка сборщика (svg-sprite, SVGO) — отдельная тема, здесь только показываем принцип разметки.

Когда что выбирать

• Иконок сотни, они однотонные, проект без билд-шага — иконочный шрифт всё ещё рабочий вариант, если вы готовы к fallback-глифам и настроили font-display.
• Иконки смысловые, важна доступность и надёжность отображения — SVG-спрайт или инлайн.
• Нужны многоцветные или анимируемые иконки — только SVG.
• Иконок мало и они критичны для первого экрана — инлайн-SVG прямо в HTML, без единого лишнего запроса.

Что делать дальше

Если решаете уходить со шрифта: экспортируйте нужные иконки в SVG (в Font Awesome и большинстве наборов есть SVG-версии), прогоните их через SVGO для чистки, соберите спрайт сборщиком и замените классы иконок на <svg><use>. Пока не ушли — как минимум добавьте шрифту font-display: block или swap и проверьте, что ARIA-подписи стоят на смысловых иконках, а не только на визуале. Меряйте в проде долю пользователей, у которых шрифт не догружается: если она заметна, это и есть ваш аргумент за переход.