Верх страницы
Обложка к записи Пуленепробиваемый @font-face
Время для прочтения: 0 мин. 42 сек.

Пуленепробиваемый @font-face

Современный способ внедрения шрифтов на веб-страницу.

И так начнём

@font-face {
 font-family: 'fontello';
 src: url('../fonts/fontello.eot');
 src: url('../fonts/fontello.eot?#iefix') format('embedded-opentype'),
    url('../fonts/fontello.woff') format('woff'),
    url('../fonts/fontello.ttf') format('truetype'),
    url('../fonts/fontello.svg#fontello') format('svg');
 font-weight: normal; font-style: normal;
}
/* Сглаживание */
body {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:  hidden;
  -ms-backface-visibility:   hidden;
}

Прогресс не стоит на месте, появился формат woff2

Для поддержки нового формата woff2 просто добавьте в свой @font-face новую строку:

@font-face {
 ...
 url('../fonts/fontello.woff2') format('woff2'),
 ...
}

Где взять весь набор шрифтов

Вы наверное заметили, что необходимо иметь несколько форматов одного и того же шрифта (если быть точным, то — 5). Само собой, что искать их в интернете совершенно нет никакой необходимости. Их можно сгенерировать при помощи Белки или Online Font Converter.

Совместимость с браузерами

БраузерФорматВерсия
SafariTTF/OTF5.03
IEEOT6+
FFTTF/OTF/WOFF3.6
ChromeSVG/TTF/OTF8
OperaTTF/OTF11
AndroidTTF2.2
iOSTTF/SVG3.2

Возможные проблемы

Если ваш сайт использует SSL, то надо подшаманить ваш .htaccess в папке со шрифтами.

Header set Access-Control-Allow-Origin "*"
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-woff .woff
AddType image/svg+xml .svg
AddType application/octet-stream .afm

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

Опера 10 при релоаде страницы сбрасывает шрифт. Если закрыть и снова открыть страницу — работает. Возможно, это связано с режимом Turbo

IE отказывается загружать шрифты, когда страница открыта локально.

RTFM

Обновление от 25.11.2016

На данном этапе google рекомендует избавиться от svg-версии шрифтов.

Теоретически, существует ещё один формат контейнера шрифтов — SVG. Однако он никогда не поддерживался в IE и Firefox, и сейчас перестает использоваться в Chrome…

Автор: Кобзарёв Михаил

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы