0

well, I have problem with font-face element. It works very well in chrome, but isn't work in any browser. What is the problem? Thanks in advance.

demo -> http://codepen.io/designhorf/pen/AlJKp

designhorf
  • 1
  • 1
  • try to generate some snippets on [fontsquirrel generator](http://www.fontsquirrel.com/tools/webfont-generator), compare and figure it out – Jan Turoň Feb 21 '14 at 23:43
  • this url http://www.designhorf.com/font/Nexa_Bold.otf, is not working. – sopanha Feb 22 '14 at 00:58
  • check this out: http://stackoverflow.com/questions/14287465/font-face-not-loaded/14287894#14287894 – 97ldave Feb 22 '14 at 10:24

1 Answers1

1

You need more than just an otf file. Different browsers want different file types, and IE as usual doesn't behave.

@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; }

A great resource for generating both the code and and the files is http://www.fontsquirrel.com/tools/webfont-generator

Have fun!

slynagh
  • 601
  • 4
  • 16
  • if you're targeting IE9 and up, having just .otf and .woff is actually enough. No neeed for a ttf, eot and svg (svg and eot are, in fact, highly discouraged. The first is only for IE8 and below, the latter is huge and renders pretty horridly). Loading it in [otf, woff] order will work in FF, Chrome, Opera, IE9+, and Android 4.4+, as well as FF/Chrome on Android 4.* – Mike 'Pomax' Kamermans Feb 24 '14 at 19:45