Что если не отображаются шрифтовые иконки

21 августа, 2019

Вы иконки видите, заказчик — нет. Разбираемся в проблеме.

Сегодня я столкнулась с необычной задачей: у клиента не отображаются иконки. А у меня видны со всех браузеров и со всех устройств. У него с устройств, кстати, тоже всё в порядке, дело в десктопе. Значит проблему интернета/провайдера/роутера отсекаем. Несколько опрошенных тоже подтверждают, что всё в порядке. Поневоле начинаешь думать: а не может ли антивирус блокировать загрузку шрифтов? Или система это делает? Проверяем, что там у него: винда, восьмёрка, ничего подозрительного. Гугл не знает. Клиент уже перепробовал все стандартные советы, обращался в техподдержку и к специалистам — нет иконок, прямо загадка.

Я уже борюсь за интерес больше, чем за решение. На первый взгляд подозрительными кажутся пути к шрифтам. Они выглядят примерно так: '../../../../../fonts/..' Самым простым будет заменить их на абсолютные, чтобы точно не было подвохов. Но напоминаю: другие люди иконки видят, значит файлы всё-таки подключаются. Трачу уйму времени разбираясь с новой cms, чтобы добраться до этих путей и изменить их. И тут… озарение, вот оно. Смотрим в код, даю минуту на размышление.

@font-face {
   font-family: uni2-icons;
   font-weight: normal;
   font-style: normal;
   font-display: swap;
   src: url('../../design/themes/abt__unitheme2/media/custom_fonts/uni2-icons.eot?1566300659');
   src: local('Material Icons'), local('MaterialIcons-Regular'),
        url('../../design/themes/abt__unitheme2/media/custom_fonts/uni2-icons.woff?1566300659') format('woff'),
        url('../../design/themes/abt__unitheme2/media/custom_fonts/uni2-icons.ttf?1566300659') format('truetype');
}

А теперь объясняю.

Директива объявления шрифтов может содержать локальное имя в функции local. Если операционная система найдёт шрифт с таким именем на компьютере пользователя, то загружать файлы с сервера уже не станет. Это безусловно удобно и повышает быстродействие сайта. Но что если это будет другой шрифт, а не ваш? Каким-то невероятным совпадением именно это и случилось у клиента. Убираем объявление local и получаем счастье.

В шрифтовых иконках этому свойству точно не место. Да и вероятность настоящего установленного шрифта стремится к нулю. Под настоящим я понимаю шрифты, скаченные с официальных источников. Так не лучше ли нам совсем от local отказаться?