CODEWITHSUNDEEP
csswordpressfont-face
akshay2000
akshay2000

Reputation: 824

@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.

Upvotes: 0

Views: 954

Answers (3)

akshay2000
akshay2000

Reputation: 824

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.

Upvotes: 0

Adam Grant
Adam Grant

Reputation: 13105

This probably has something to do with your use of relative paths, but more information is needed, can you open your console and tell us what you see there as an error? Also, where are these files located in relation to your site root?

If your user is at http://yoursite.com/blog/hello-world, it's going to look for the font at http://yoursite.com/blog/hello-world/segoewp-light.[ext]

You may want to specify the absolute path of these files.

Upvotes: 1

imakeitpretty
imakeitpretty

Reputation: 2116

I don't know if this will help, but this is what fontsquirrel has to say Troubleshooting Font-Face Problems.

Upvotes: 0

Related Questions