@font-face Paths Don't Seem to be working properly

Question

I'm having issues with my @font-face code in my style.css file for a theme. I've already tested the theme as an HTML site, and the paths are the same. The style.css file uses a relative path to a fonts folder like so:

`@font-face{

font-family:'Fertigo_PRO-webfont';

    src:url('./fonts/Fertigo_PRO-webfont.eot'); 

    src:url('./fonts/Fertigo_PRO-webfont.eot?iefix') format('eot'), 

        url('./fonts/Fertigo_PRO-webfont.woff') format('woff'), 

        url('./fonts/Fertigo_PRO-webfont.ttf') format('truetype'), 

        url('./fonts/Fertigo_PRO-webfont.svg#webfont') format('svg');

}

And I call it in the stylesheet for an id:

#masthead{

    background-image:url('mastgrad.png');

    background-repeat: repeat-x;

    height: 250px;

    width:100%;

    padding:20px 0 0 0;

    margin:0;

    }

The font isn't displaying where it's supposed to, even though I never had an issue with this before I put this on my LAMPP server for development. It seems to replicate in Firefox and Chrome, though I haven't tested it elsewhere.

Answer 1

I had an issue like that in the past, and the solution was so easy that was impossible for me to see, my code was exactly as yours and I had to change it to it... hope you have the same luck.

 @font-face {
    font-family:'Fertigo_PRO-webfont';
       src:url('fonts/Fertigo_PRO-webfont.eot'); 
       src:url('fonts/Fertigo_PRO-webfont.eot?iefix') format('eot'), 
         url('fonts/Fertigo_PRO-webfont.woff') format('woff'), 
         url('fonts/Fertigo_PRO-webfont.ttf') format('truetype'), 
         url('fonts/Fertigo_PRO-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
 }

Answer 2

It was a permissions issue with XAMPP that was complicating things. For whatever reason, Gnome's GUI permissions interface wasn't actually changing permissions even though I thought I had changed them. I fixed it in BASH instantly. For those interested, and to add an answer for some people who may have a similar problem, this is an important resource when working with @font-face, CDNs, and testing on Firefox:

http://wordpress.org/support/topic/plugin-w3-total-cache-font-face-not-working-in-firefox