Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

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;
 }
share|improve this answer
    
Doesn't seem to have made a difference. –  Iterate Nov 21 '11 at 16:28
    
Fixed it, see below. –  Iterate Nov 21 '11 at 20:09
add comment
up vote 0 down vote accepted

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.