CSS Font-Face url not working?

Question

Im having some trouble with the @font-face selector, I have the following...

@font-face {
   font-family: 'MuseoSans-700';
      src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
      src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot?#iefix')  format('embedded-opentype'),
           url('style_159306.woff') format('woff'),
           url('style_159306.ttf') format('truetype');
    }

Only my fonts arent being rendered and instead im being shown my fallback, arial.

If i paste the url to the font into my browser it asks me to download so i know the links correct, is there something im doing wrong in the above?

Im calling the font using...

h1 {
color:#272727;
font:108px 'MuseoSans-700',Helvetica,Arial,sans-serif;
letter-spacing:-7px;
}

Thanks

Solution 1

Check out this article on bullet-proof @font-face syntax. http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

You also didn't specify which browsers it's working or not working in so I assume it's not working in any of them.

Solution 2

.eot is for internet explorer.
Try .otf

So in practice you need to have both, something like

e.g.

@font-face {
     font-family: 'MuseoSans-700';
 src: url('http://mysite.co.uk/clients/reload/Images/style_159306.eot');
 src: url('http://mysite.co.uk/clients/reload/Images/style_159306.otf');
}

A good tutorial is here: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/

Strelok's reference to Paul Irish's article is also very good.