Why Can I Not Implement @font-face?

My problem is that custom fonts do not display when using @font-face. My CSS is referenced in it's own file and the code is: @font-face { font-family: 'MerceariaAntique'; s

Solution 1:

what is your folder structure?? if you calling css inside a folder "css" you must point out the correct path to custom fonts like this "../"

src: url('../type/mercearia_new/21319b_0_0-mercearia.eot');

Solution 2:

Here's an example of how to use @font-face:

@font-face {
  font-family: "Example Font";
  src: url("http://www.example.com/fonts/example");
}
h1 {
  font-family: "Example Font",  sans-serif;
}

I assume you have already checked e paths of the font files and they are correct. I also assume you have checked your Error Console for any CSS warnings or errors like file not found.

Try double checking where you are assigning the font as a font-family in your code.

Also, a font-face reference: http://reference.sitepoint.com/css/at-fontface

UPDATE: Try WebFont Loader from Google