@font-face not working in IE8 but works in chrome, firefox?

Question

css code:

@font-face {
font-family: 'sky2-webfont';
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf');
}

it works fine in chrome and firefox. but not in IE8.

when i add .eot font for IE in css

@font-face {
font-family: 'sky2-webfont';
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf');
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot');
}

its works in IE8 but not in chrome and firefox.

how to make it work in all browsers???

EDIT

tried Font Squirrel . that too didn't work.

@font-face {
font-family: 'sky2-webfont';
src: url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.ttf');
src: url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.eot'),
  url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.eot?#iefix') format('embedded-opentype'),
  url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.woff') format('woff'),
  url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.ttf')  format('truetype'), 
     url('http://swaidanews.com/CMS/fonts-sky/sky2-webfont.svg#leb-webfont') format('svg');
}

This one worked.

@font-face {
font-family: 'sky2-webfont';
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot');
src: url('http://swaidanews.com/CMS/fonts-sky/sky2.eot?#iefix') format('embedded-opentype'),
     url('http://swaidanews.com/CMS/fonts-sky/sky2.woff') format('woff'),
     url('http://swaidanews.com/CMS/fonts-sky/sky2.ttf')  format('truetype'), 
     url('http://swaidanews.com/CMS/fonts-sky/sky2.svg#sky2-webfont') format('svg');
}

but still i don't understand, the fonts are in the 'fonts-sky' folder

sky2-webfont.woff
sky2-webfont.ttf
sky2-webfont.eot
sky2-webfont.svg

but in css @font-face we are using simply

sky2.woff
sky2.eot
sky2.svg
sky2.ttf

Answer 1

IE8 has only partial support has you can see here: http://caniuse.com/fontface

This is what I'd use:

@font-face {
    font-family: 'sky2-webfont';
    src: url('font.eot');
    src: local('☺'), 
         url('font.woff') format('woff'), 
         url('font.ttf') format('truetype'), 
         url('font.svg#webfontzVgQprWy') format('svg');
}

Answer 2

I would recommend you use the font in , , and formats. ， ， 和格式的字体。 This way your layout will display correctly through all major web browsers.

Your CSS would be like this:

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

As an example, Google Fonts develops its webfont kits using formats, as can be seen here . 开发其web字体包，可以看出这里 。

Answer 3

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

}