Search code examples
csswordpressfont-face

@font-face fails to work with custom WordPress theme

I am working on WordPress with not-so-popular-and-profound theme. Its safe to say that its a totally custom theme. The problem I'm facing is about @font-face. I have working font-face construction here: http://akshay2000.pcriot.com/Trial/index1.html
I created same structure with my WordPress theme. It didn't work. Now, I have CSS as follows: 

    @font-face {
    font-family: 'SegoeWP-Light';
    src: url('segoewp-light.eot');
    src: url('segoewp-light.eot?#iefix') format('embedded-opentype'),
         url('segoewp-light.woff') format('woff'),
         url('segoewp-light.ttf') format('truetype'),
         url('segoewp-light.svg#segoewp-light') format('svg');
    font-weight: normal;
    font-style: normal;
    }

The font files are in same directory as style.css and index.php. I'm using firebug for debugging. When I hover over individual file name (like segoewp-light.woff) firebug displays correct font. However, when I hover over font family name (which is 'SegoeWP-Light) I see regular serif font. Obviously, resultant font on site is serif font. I don't understand what is wrong. Same setup works for me on normal (non-WordPress) pages. I have also tried uploading fonts to a different serve and using absolute public URLs. That didn't work either.

Solution

  • The problem was indeed about the path of font. I had WordPress hosted at http://indestructible.in/wp and subdomain http://blog.indestructible.in pointed to the directory. While CSS tried to load fonts on the subdomain, fonts were to be loaded from main domain. As pointed above, Firefox and IE need them to be on the same domain. (This might work in some cases but in my case, I have separate A records for main domain and subdomain. So, they might be treated differently.) This is why everything was okay when browser was pointed to the directory directly. What I did was, I created a totally new WordPress install on the subdomain and everything worked wonderfully!
    TL;DR: Firefox and IE need @font-face fonts on the same domain and its always better to directly install WordPress on subdomain rather than pointing subdomain to the WordPress directory.