Для использования своих шрифтов на сайте используется такой код:@font-face {
font-family: 'PFDinMonoBold';
src: url('pfdinmono-bold-webfont.eot');
src: local('☺'),
url('pfdinmono-bold-webfont.woff') format('woff'),
url('pfdinmono-bold-webfont.ttf') format('truetype'),
url('pfdinmono-bold-webfont.otf') format('opentype'),
url('pfdinmono-bold-webfont.svg#webfontS2rh8Zow') format('svg');
font-weight: normal;
font-style: normal;
}Этот код универсален, но даже он может дать сбой. И, вопреки расхожему мнению, проблемы начнутся не со всеми любимым IE, а с Оперой.
ошибка будет вот такого вида
opera webfont discarded - malformed
В процессе решения этой проблемы я выяснил, что у этой ошибки могут быть две причины:
• Использование вместо кавычки «"» апострофа «'» в таблицах стилей. Причём, как я понял, кавычки должны использоваться везде. На этот ответ я наткнулся на stackoverflow.com
• Неправильный MIME тип отдаваемый сервером для неизвестного ему формата файла. На этот момент я напоролся когда решил протестить работу встроенного шрифта в Яндекс Браузере:
На самом деле это известная проблема Оперы. Ещё с незапамятных времён существовал такой баг в Опере когда она вместо того, чтобы загрузить файл открывала его как текст и пользователь видел кракозябры. Так и тут: сервер не знал этого формата файла и отдавал его как text/html. Прописав в настройках сервера правильный для .woff шрифта MIME всё заработало правильно.
С неправильной отдачей сервером MIME типа я сталкиваюсь не впервой поэтому для себя и для посетителей своего блога у меня есть маленькая подборка из редко используемых MIME типов
Post Scriptum: Пока искал решение я натолкнулся на ещё одну возможную причину из-за которой шрифты могут не работать: русские буквы в имени пользователя. С этой ошибкой уже ничего не поделаешь.