Новый пуленепробиваемый синтаксис @font-face

Первым на Хабрахабре об этой находке сообщил ZaiSL, разместивший топик-ссылку во блоге «Каскадные Таблицы Стилей».

А здесь мною приводится перевод на русский язык той блогозаписи, на которую указывала эта ссылка.

Оперативно постите :)
Chrome 9 — всё гуд!

Гениально.

уже появилось в опциях генератора fontsquirrel.com)

Воткните под кат пожалуйста статью.

От себя добавлю, что упомянутые автором первоисточника «жалобы на отказ шрифтов загружаться в Android», которые появляются в случае следования рецепту Пола Айриша, вызваны известным багом в браузерах Android 2.2 и Android 2.3: эти браузеры, оказывается, вообще не воспринимают указание «local('имя шрифта')» и игнорируют декларацию @font-face, его содержащую.

Пол Айриш приводит специальный код, которым можно обойти эту проблему, используя уточнитель «@media screen and (max-device-width: 480px)» и метаэлемент <meta name="viewport">. При этом, как и в рецепте «Mo' Bulletproofer», появляется необходимость двойной декларации; кроме того, сейчас есть устройства с Android, использующие более широкие экраны, чем 480px. Так что костыль этот кривой и негодный; а вот рецепт Fontspring лишён этих недостатков, так как «local(…)» в нём вовсе не требуется.

У меня вопрос вообще насчёт использования @font-face:
лично я его пока не использую только потому что при загрузке мне не нравится что шрифт дергается
(то есть сначала показывается шрифт без применения стилей,
подгружается шрифт и только потом меняется внешний вид текста)

Теперь вопросы:
1) Как-то можно избежать этого дерганья?

2) Помогает ли от такого поведения использование кэшированных шрифтов от Гугла?
(а-ля fonts.googleapis.com/css?family=IM+Fell+English|Molengo|Reenie+Beanie)

3) Насколько распространено решение из пункта 2?
Я просто нигде не припомню чтобы такое видел.

Пост вдохнул веру в то, что всему своё время и место :) Здорово, что нашлось такое простое решение.

Кстати очень неплохая ссылка для тех кто пользуется «внешними» шрифтами:
http://www.fontsquirrel.com/fontface/generator

У этого способа есть недостатки: не работает в Опера (у меня). В ФФ и Хроме заметен процесс переключения шрифта.

Но я нашел решение:

/* для IE */
@font-face {
font-family: 'MyriadProLight';
src: url('fonts/myriadpro-light-webfont.eot?') format('embedded-opentype');
}
/* для не IE */
@font-face {
font-family: 'MyriadProLight';
src: url('fonts/myriadpro-light-webfont.svg#webfontOkKwgGFT') format('svg'), /* первым в списке для Opera */
url(data:font/woff;charset=utf-8;base64,...) format('woff'), /* подключаем через base64 для FireFox. В этом случае не заметен процесс подключения шрифта. */
url('fonts/myriadpro-light-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Остается заметен процесс подключения шрифта в Хроме, но он не раздражает. И для меня остается загадкой почему Хром и ФФ загружают woff шрифт, а не svg, а Опера наоборот.

А у вас нормально отображаются шрифты на iPhone в Safari?
Делала свой пример, не заработало, думала, шрифт неправильно сгенерился (сама делала), но на сайте fontsquirrel.com тоже не отображаются.
iOS 4.0

Есть шрифт, кириллицу поддерживает. Но, когда я пытаюсь заюзать его с помощью @font-face, срабатывает только в том случае, если текст на латинице. Кириллицу тоись напрочь отказывается отображать :(
Вы не подскажете, в чём может быть дело?
Может быть, в конкретном шрифте?

Люди, может быть я задам глупый вопрос, но я для себя не могу найти на него ответа.

С этими все понятно:

EOT — only supported by Internet Explorer
WOFF— Cross-browser, web-only font format that uses gzip compression. IE9+, FF3.6+, Chrome 5+
SVG — This is an XML format required by iOS devices before version 4.2.

НО!
за чем тогда подключать TTF, если и без него все хорошо работает, WOFF недостаточно??
Заранее спасибо за ответ.

Отлично! Как раз в данный момент волновала эта тема. Вы сэкономили мне несколько часов.

В Ваше втором примере eot шрифт не прописан в data. Tо есть получается в IE8 шрифт через data никак не добавить?