The font face does not work in

Question

I created an html layout and used css3 @font-face . Here is my code

 @font-face { font-family: 'MyriadProRegular'; src: url('myriad.eot'); src: url('myriad.eot?#iefix') format('embedded-opentype'), url('myriad.woff') format('woff'), url('myriad.ttf') format('truetype'), url('myriad.svg#MyriadProRegular') format('svg'); } 

and i use

 font-family: 'MyriadProRegular'; 

It works in all browsers that accept IE. Please, help.

Answer 1

I cannot recommend Font Squirrel for this. Just run the Font Face generator and you will get code that will work in IE. If you are missing a font file type, it even does it for you. This has saved me a lot of time in the past, and I cannot recommend it enough.

http://www.fontsquirrel.com/fontface/generator

This is from Font Squirrel and a cross browser works:

 @font-face { font-family: 'NimbusSanConD-Lig'; src: url('fonts/228BFB_1_0.eot'); src: url('fonts/228BFB_1_0.eot?#iefix') format('embedded-opentype'), url('fonts/228BFB_0_0.woff') format('woff'), url('fonts/228BFB_0_0.ttf') format('truetype'); font-weight: normal; font-style: normal; } 

Answer 2

svg , woff and eot even (supported) font types? I am sure there is no .svg, and I have never heard of .woff and .eot. Just truetype should work in all browswers. (I'm not sure about the Macintosh, though)

the way the font works always works for me:

 @font-face { font-family:alba; src:url(alba.ttf); } 

Thus, no quotation marks are used here. What I suggest also to try for your case is to do it as

 @font-face { font-family:Myriad Pro Regular;/* note the whitespaces, I believe this is what the font itself is called (not the filename) */ src:url(myriad.ttf); } 

Make sure you always consider the difference between uppercase and lowercase letters! If the font file is called Myriad.ttf when entering myriad.ttf, it may not work in some browsers (versions).