@font-face is not working in WordPress theme

2 Views

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:

Read More
@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!

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. 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');

  2. You can’t use PHP tags in a CSS file, unless you’ve specifically set up your server to allow it. Showing us the resulting rendered style.css may help further diagnose, but I suspect this is your issue.

    Relative paths should work just fine, so I doubt that’s your issue unless you’ve got the paths wrong.