1

I have created a html layout and using 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 am using 

font-family: 'MyriadProRegular';

it's work in all browsers accept IE. Please help.

sandeep
  • 91,313
  • 23
  • 137
  • 155
ManpreetSandhu
  • 2,115
  • 5
  • 20
  • 17

2 Answers2

3

I can't recommend Font Squirrel enough for this. Just run through their Font Face generator and you'll get code that will work in IE. If you're missing a font file type it even makes that for you. It's saved me a lot of time in the past and I can't recommend it enough.

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

This is from Font Squirrel and works cross browser:

@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;
}
SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
0

are svg, woff and eot even (supported) font types? I'm pretty sure .svg is not and I've never heard of .woff and .eot.. Just a truetype should work in all browswers. (I'm not sure about Macintosh though)

the way font-face always works for me:

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

So no quotes used here. What I'd suggest to also try for your case, is to do it like

@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 mind the difference between uppercase and lowercase letters! If the font file is called Myriad.ttf while you type myriad.ttf, it might not work in some browser(version)s.

paddotk
  • 1,359
  • 17
  • 31
  • .eot is needed for IE. Microsoft being difficult again. – SpaceBeers Jun 14 '12 at 08:33
  • Not as far as I know but worth checking. I think they've always done it. – SpaceBeers Jun 14 '12 at 11:51
  • I've checked and my way seems to work just fine in FF, IE, Chrome and Safari :) – paddotk Jun 14 '12 at 12:48
  • I have IE9 installed. Other versions can't be reliably checked – paddotk Jun 14 '12 at 12:51
  • True. IE Tester is spotty at best and the other versions mode in IE9 are nothing like the actual browsers. I've had to run a virtual machine for IE 7 and 8 (IE 6 can go to hell). I'm pretty sure your code won't run in anything < 9. – SpaceBeers Jun 14 '12 at 12:54
  • What is, according to you, the best software/site to simulate this (preferably for all major browsers)? I'd greatly appreciate it if you could share a link! :) – paddotk Jun 14 '12 at 12:56
  • The only truly reliable way is to run the actual browser. A virtual PC might seem like overkill but until they release standalones for Windows 7 it's the best I can think of. – SpaceBeers Jun 14 '12 at 12:59
  • But what is your best bet, even though not fully reliable? Also, I'm not sure what you mean by 'standalones'? Do you mean non-official browsers that work in the same way as a(n) (specific) older version of a certain browser? – paddotk Jun 14 '12 at 13:03
  • IE Tester is the best of a bad bunch. If you're on Windows XP you can get IE7 and IE8 Stand Alone versions (http://ie7-standalone.en.softonic.com/) – SpaceBeers Jun 14 '12 at 13:08