Генератор @font-face

Дизайнеры очень часто применяют нераспространенные шрифты, которые либо не поддерживаются системой пользователя, либо просто не установлены. Если клиент очень хочет видеть именно эти шрифты на сайте, то приходится искать вские ухищрения типа flash, JavaScript или попросту изображения. С появлением @font-face стало полегче, но каждая группа браузеров по своему работает с @font-face. Если Вы хотите без особых мучений применять нестандартные шрифты на Вашем сайте, то Вам сюда – www.fontsquirrel.com

Коротко:
суть в том, что каждое семейство браузеров умеет понимать определенный тип шрифта

• TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
• EOT fonts for Internet Explorer 4+
• WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
• SVG fonts for iPad and iPhone

Действия:

1. берете нужный шрифт (удалив его со своей машины на время проверок)
2. грузите его в генератор http://www.fontsquirrel.com/fontface/generator
3. получаете архив с полным набором шрифтов в выше приведенных форматах
4. прикручиваете себе в проект
5. наслаждаетесь

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

Пример кода CSS:

@font-face {
  font-family: 'PopularScriptNormal';
  src: url('popularscript_normal-webfont.eot');
  src: url('popularscript_normal-webfont.eot?#iefix') format('embedded-opentype'),
  url('popularscript_normal-webfont.woff') format('woff'),
  url('popularscript_normal-webfont.ttf') format('truetype'),
  url('popularscript_normal-webfont.svg#PopularScriptNormal') format('svg');
  font-weight: normal;
  font-style: normal;
}

Сам я пока только попробовал на нескольких шрифтах сие творение, кажется работает. Но пока не применял на практике в действующих сайтах. К тому же, применение @font-face для всех браузеров слегка поедает трафик пользователей, ведь для каждого из типов браузеров свой вид шрифта, а они не особо мало весят 🙁

В общем, применять это дело или нет, решать Вам. Я же еще поэкспериментирую.