@font-face is not working in Wordpress theme

Question

I'm currently working on my online portfolio. As you can see, @font-face runs like a charm. However, I'm now converting that static HTML into a dynamic Wordpress theme. Here's when @font-face stops working. I'll First explain how I've done it in static HTML/CSS.

I've installed the fonts in a folder called "fonts" in the main directory of my website (where index.html is sitting). With the following code I declare the font at the top of my css-file:

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

Then I call the font with font-family: MaidenOrange; in the rest of my css-file.

When I was converting this to Wordpress, I first copy pasted my whole stylesheet, and installed the "fonts" folder I created in the theme directory. That didn't work (it never does the first time). My first Google session gave me the impression it had to do with an absolute path vs. relative path problem. So I changed the @font-face declaration in my Wordpress Theme stylesheet to the following:

@font-face {
font-family: 'MaidenOrange';
src: url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.eot');
src: url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.eot?#iefix') format('embedded-opentype'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.woff') format('woff'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.ttf') format('truetype'),
     url('<?php bloginfo('template_directory'); ?>/fonts/MaidenOrange-webfont.svg#MaidenOrangeRegular') format('svg');
font-weight: normal;
font-style: normal;

}

That still isn't working! My theme just shows Arial (which is the second font I passed in the css). I've googled my ass off to solve this, but I'm getting nowhere. Any help would be much appreciated!

Chris Fletcher Chris Fletcher · Accepted Answer · 2011-12-06T20:19:32

Maybe I'm misreading what you wrote, but I don't think you can have php code in your css file. Try moving your second code block into your theme's header.php file, wrapped in <style> tags.

Alternately, you could upload your fonts folder to the root of your site and use site-absolute paths, like so:

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

@font-face is not working in Wordpress theme

2 Answers