@font-face не работает в ff/opera только в chrome

ну, у меня проблема с элементом font-face. Он очень хорошо работает в хроме, но не работает ни в одном браузере. В чем проблема? Заранее спасибо.

демо -> http://codepen.io/designhorf/pen/AlJKp


html fonts css font-face opentype
person designhorf    schedule 21.02.2014    source источник
comment
попробуйте сгенерировать несколько фрагментов на генераторе шрифтов, сравните и разберитесь.   -  person Jan Turoň    schedule 22.02.2014
comment
этот URL designhorf.com/font/Nexa_Bold.otf не работает.   -  person sopanha    schedule 22.02.2014
comment
проверьте это: stackoverflow.com/questions/14287465/ шрифт не загружен/   -  person 97ldave    schedule 22.02.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно больше, чем просто файл otf. Разным браузерам нужны разные типы файлов, и IE, как обычно, не работает.

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

Отличным ресурсом для создания как кода, так и файлов является http://www.fontsquirrel.com/tools/webfont-generator

Повеселись!

person slynagh    schedule 22.02.2014
comment
если вы ориентируетесь на IE9 и выше, на самом деле достаточно иметь только .otf и .woff. Нет необходимости в ttf, eot и svg (на самом деле, svg и eot крайне не рекомендуются. Первый только для IE8 и ниже, последний огромен и рендерится довольно ужасно). Загрузка в порядке [otf, woff] будет работать в FF, Chrome, Opera, IE9+ и Android 4.4+, а также FF/Chrome на Android 4.* - person Mike 'Pomax' Kamermans; 24.02.2014