Пуленепробиваемый @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.

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

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

Если ваш сайт использует 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

• Кросс-браузерный @font-face
• Новый пуленепробиваемый синтаксис @font-face
• @font-face
• Формат TTF
• Формат OTF
• Формат EOT
• Формат SVG
• Формат WOFF
• Webfonts — разбираемся с антиалиасингом под Windows
• Оптимизация шрифтов

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

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

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

Firefox Google Chrome Internet Explorer Opera Safari