Question

Possible Duplicate:
How we can use @font-face in LESS type of CSS

With the modern browsers and their newest versions in the back of our mind (for a website intended for future use) would this font definition with ttf, svg and eot be the best solution for FF, IE, Chrome and Safari?

Is the below the best minimal version that guarantees compatibility? in other words can svg and eot be removed nowadays or does IE still need eot being unable to read ttf?

        @font-face {
            font-family: 'Somefont Regular';
            src: url('somefont.eot');
            src: local('Somefont Regular'), 
                 local('Somefont'), 
                 url('somefont.ttf') format('truetype'),
                 url('somefont.svg#font') format('svg'); 

Answer 1

The magical Paul Irish wrote an article on @font-face cross-browser/cross-platform support sometime in 2010. It’s worth checking out.

Also, here’s some code I tend to use often:

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