@font-face unable to generate the font from the server

I have looked around online and decided to use the following @font-face implementation:

My CSS:

@font-face {
font-family: matt;
src: url("/uploads/testing/Interstate-Regular.eot?#iefix") format('embedded-opentype')
     url("/uploads/testing/Interstate-Regular.ttf")  format('truetype');
}
h5.pleasework {
font-family: matt;
font-size:72px;
}

My HTML:

<head>
 <link rel="stylesheet" type="text/css" media="all" href="{stylesheet='in-store-analytics/testingStyle'}" />

</head>
<h1> this is a test </h1>

<img src="/uploads/features/featured-block_inthenumbers.png" alt="Smiley face" height="420" width="420">
<img src="/uploads/testing/awesomeness.jpg" alt="Smiley face" height="420" width="420">

<div id="happiness">
    <h5 class="pleasework"> PLEASE WORK FOR ME </h5>
</div>

For whatever reason, the font won't generate, but the images do, a result which makes me suspect that the issue lies with the url tag within the src parameter.

Any ideas? Help would be much appreciated.

Thanks in advance!

Solution

Try this...

Make sure to put @font-face at top of your stylesheet

@font-face {  
  font-family: "Interstate-Regular";  
  src: url(/uploads/testing/Interstate-Regular.eot);
  src: local("Interstate-Regular"), url(/uploads/testing/Interstate-Regular.ttf) format("truetype");
} 

h5.pleasework {
font-family: "Interstate-Regular";
font-size:72px;
}

However, if you were to use only .tff, then would it would look like this:

@font-face {  
      font-family: matt;  
      src: url(/uploads/testing/Interstate-Regular.ttf) format("truetype");
    } 

h5.pleasework {
font-family: matt;
font-size:72px;
}

Hope this helps!

EDIT:

This site is VERY helpful: (REFER TO SECTIONS: 'How @font-face Works: Easy Peasy' & 'C'mon, is it Really that Simple?' http://randsco.com/index.php/2009/07/04/p680