Как правильно отображать @font-face в Firefox?

Я пытаюсь использовать @font-face для Chrome, Safari, Firefox и IE. Для IE я даже не уверен, что делать, но для других браузеров я хочу, чтобы часть @font-face работала.

Вот что я использовал:

  @font-face {
  font-family: "Handwriter";
  src: url("/folder/Font-Regular.otf");
  }

И тогда я также попробовал:

 @font-face {
 font-family: "Handwriter";
 src: url("http://www.domain.com/folder/Font-Regular.otf");
 }

Использование любого из них будет правильно отображать его в Chrome и Safari, но не в Firefox. Забавно, что если я использую Firebug и перехожу к файлу CSS и снова переписываю имя, то он отображает его. Кроме того, файл шрифта находится на моем сервере, и я проигрываю его в том же домене. Так что не уверен, что здесь происходит не так.


html css webfonts font-face
person KPO    schedule 22.11.2012    source источник
comment
вы также можете попробовать генератор шрифтов FontSquirrel fontsquirrel.com/fontface/generator   -  person Gus    schedule 04.12.2012
comment
URL-адреса шрифтов должны быть относительными, чтобы они работали в Firefox, или вы можете настроить свой сервер, чтобы разрешить к ним доступ.   -  person Matty J    schedule 22.01.2014

Ответы (2)


arrow_upward
8
arrow_downward

попробуйте это (с вашими пользовательскими шрифтами). Помните, что формат важен:

@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
       url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}

источник: css3please

person wandarkaf    schedule 22.11.2012

arrow_upward
3
arrow_downward

Это не реклама :D

Я успешно использую генератор http://www.fontsquirrel.com/fontface :) Если у вас есть файл z ttf остальное пустяк :)

person op1ekun    schedule 15.01.2013