CODEWITHSUNDEEP
htmlurlcssfont-facesrc
matt hoover
matt hoover

Reputation: 346

@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!

Upvotes: 0

Views: 449

Answers (1)

Dom
Dom

Reputation: 40501

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

Upvotes: 1

Related Questions