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

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

  Safari IE FF Chrome Opera Android iOS
Формат TTF/OTF EOT TTF/OTF/WOFF SVG/TTF/OTF TTF/OTF TTF TTF/SVG
Версия 5.03 6+ 3.6 8 11 2.2 3.2

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

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

[code]
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
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
[/code]

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

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

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

RTFM

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>