CODEWITHSUNDEEP
csswordpress
Jack Averill
Jack Averill

Reputation: 841

Why aren't my @font-face declarations working on wordpress?

I've been trying to add some webfonts to my wordpress theme/ site, but I can't get them to work. I've added all the necessary files to my root folder, and I have tried using the following css to link them to my site.

@font-face{
font-family: 'AvenirNextLTPro-Demi';
src: url('/fonts/AvenirNextLTPro-Demi-webfont.eot');
src: url('/fonts/AvenirNextLTPro-Demi-webfont.eot?#iefix') format('embedded-opentype',
url('/fonts/AvenirNextLTPro-Demi-webfont.woff') format('woff'),
url('/fonts/AvenirNextLTPro-Demi-webfont.ttf') format('truetype'), 
url('/fonts/AvenirNextLTPro-Demi-webfont.svg#svgAvenirNextLTPro-Demi') format('svg');
}

When I add the code above to the top of my stylesheet, it stops all the other css below it from working and I end up with a very ugly un-styled page, as well as the font itself not working.

I got the code from https://http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ which seems to be highly recommended by others.

Is anyone able to tell me what I'm doing wrong?

Upvotes: 0

Views: 96

Answers (1)

Jannik Rasmussen
Jannik Rasmussen

Reputation: 397

I think the issue is the placement of your fonts. Are the fonts located on your-domain.com/fonts/YourFont.eot?

They are likely located under a theme, e.g. www.your-domain.com/wp-content/your-theme/fonts/YourFont.eot :-)

Upvotes: 1

Related Questions