INOYAKAIGOR

Внимание! Сайт незапланированно сломался и вскорости я его починю. Местами он уже, вроде, работает.

Встроенные шрифты в Опере: возможные проблемы и их решения


Запись от: 2013-11-28 13:48:26

   Для использования своих шрифтов на сайте используется такой код:

@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: Пока искал решение я натолкнулся на ещё одну возможную причину из-за которой шрифты могут не работать: русские буквы в имени пользователя. С этой ошибкой уже ничего не поделаешь.

Теги: опера opera шрифты fonts woff css mime tips & tricks 

Комментарии:



©Игорь InoY Звягинцев