Поддержка @font-face

Продолжая интересоваться разными способами сделать иконки, решила поискать что-нибудь про поддержку @font-face на мобильных устройствах.

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

Увидеть как выглядит неработающий шрифт, можно, например, в Опере Мини:

Chrome
entypo.com
Opera Mini
entypo.com in Opera Mini

На каких девайсах могут быть сюрпризы с отображением шрифтов? Каков процент устройств не поддерживает кастомные шрифты?

Короткий ответ:

@font-face support

Картинка взята из этой презентации: @font-face for icons? Compatibility research

Статья про тестирование поддержки @font-face: Testing @font-face Support on Mobile and Tablet

Можно сделать вывод, что если иконки должны быть одинаковыми на всех устройствах — шрифт лучше не использовать, более подходящим вариантом будет SVG.

Ещё пара полезных статей на тему выбора между SVG и шрифтом:

Ten reasons we switched from an icon font to SVG

Inline SVG vs Icon Fonts

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus