html - Why Can I Not Implement @font-face?

Question

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';
    src: url('type/mercearia_new/21319b_0_0-mercearia.eot');
    src: url('type/mercearia_new/21319b_0_0-mercearia.eot?#iefix') format('embedded-    opentype'),
         url('type/mercearia_new/21319b_0_0-mercearia.woff') format('woff'),
         url('type/mercearia_new/21319b_0_0-mercearia.ttf') format('truetype'),
         url('type/mercearia_new/21319b_0_0-mercearia.svg#webfontuploaded_file')     format('svg');
    font-weight: normal;
    font-style: normal;
    }

In my HTML file I have referenced it as the following alongside the main CSS file:

<link rel="stylesheet" type="text/css" media="all" href="css/fonts.css" />

I suspect I have referenced it incorrectly, but I can't find out how to reference it correctly.

Answer 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');