Css – @font-face somehow not working

cssfont-facefontsWordpress

Not sure what I'm doing wrong, but following this tutorial http://sixrevisions.com/css/font-face-guide/ I, however, have problems getting it to work.

My code at top of style.css:

@font-face {
    font-family: 'chunkfiveregular';
    src: url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.eot');
    src: url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.woff') format('woff'),
         url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.ttf') format('truetype'),
         url('http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.svg#chunkfiveregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

I've got all the files in my root folder.

I later call the font-family via:

#man_translated {
    font-size: 26px;
    font-style: italic;
    line-height: 28px;
    font-family:chunkfiveregular;
}

I'm in wordpress and the template I'm using has a preset font-canvas style for h1,h2,h3, converting each word to a png of font dakota handwritten. Perhaps this core setting within the template is in conflict with my onthefly javascript id/css change.

Best Answer

Your css is working but maybe WordPress is overriding it. Try putting !important next to the name of the font.

Example: 

#man_translated {
    font-size: 26px;
    font-style: italic;
    line-height: 28px;
    font-family: chunkfiveregular !important;
}

or you could also use relative links. Instead of putting http://careerteam.de/wp-content/themes/theme1383/css/chunkfive-webfont.eot, Get rid of http://careerteam.de/ and make it like this:

url('wp-content/themes/theme1383/css/chunkfive-webfont.eot');

Fiddle

Related Topic