WordPress.org

Support

Support » Themes and Templates » [Resolved] Fonts included with @font-face are not rendered

[Resolved] Fonts included with @font-face are not rendered

  • I’d like to start with the statement that I’ve read anything google could show me on the subject.

    I have a subdir “fonts” of my /wp-content/themes/theme-name dir. In this “fonts” dir I have 5 files: 4 font files, generated by FontSquirrel (robotocondensed-regular-webfont.eot, robotocondensed-regular-webfont.woff, robotocondensed-regular-webfont.ttf, robotocondensed-regular-webfont.svg) and one css file (fonts.css). The contents of fonts.css is this:

    @font-face {
        font-family: 'Roboto Condensed';
        src: url('robotocondensed-regular-webfont.eot');
        src: url('robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('robotocondensed-regular-webfont.woff') format('woff'),
             url('robotocondensed-regular-webfont.ttf') format('truetype'),
             url('robotocondensed-regular-webfont.svg#robotocondensed') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }

    I am referencing fonts.css with the following code in my /wp-content/themes/theme-name/header.php:

    <link rel="stylesheet" type="text/css" href="<?php get_site_url(); ?>/wp-content/themes/theme-name/fonts/fonts.css" />

    No fonts are rendering under any browser. Why?

    However, when I unzip the contents of FontSquirrel’s zip file in a its own subdir of the /wp-content/themes/theme-name/ dir, and open FontSquirrel’s html demo of the font, the font loads normally.

    I have not modified .htaccess or any other settings at server level. I’m running an Apache server.

    Any help towards making the fonts render is welcome. Thank you! 🙂

Viewing 15 replies - 16 through 30 (of 43 total)
  • There it is: http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/fonts.css It’s included in header.php like this:

    <link rel=”stylesheet” type=”text/css” href=”<?php echo get_stylesheet_directory_uri(); ?>/fonts/fonts.css” />

    Thanks, saw it now, but that’s included after your stylesheet.
    Can you not just put the code from fonts.css into your style.css file?

    I just did, but no effect. I haven’t adjusted the urls since they are absolute.

    It looks like it’s working if you remove the space in between your @font-face declaration

    RobotoCondensed

    Hmm, no, it’s still not. You mean having:

    @font-face {
        font-family: 'RobotoCondensed';
        src: url('http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/robotocondensed-regular-webfont.eot');
        src: url('http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/robotocondensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/robotocondensed-regular-webfont.woff') format('woff'),
             url('http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/robotocondensed-regular-webfont.ttf') format('truetype'),
             url('http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/robotocondensed-regular-webfont.svg#helen_bgregular') format('svg');
        font-weight: normal;
        font-style: normal;
    }

    and then:

    .menu ul li a {
        color: #7F7F7F;
        display: block;
        font: 15px/34px "RobotoCondensed";
        height: 34px;
    }

    That’s how I have it right now and the font is not rendered under either FF or GC.

    I just meant removing the space in the declaration (just in @font-face).

    I first tried that (removing the space only in @font-face) only in Firebug and it didn’t work. Now I edited the css file to look like you suggested and it still doesn’t work. I don’t see how it could actually, if the font-face declaration is different than the font-family name used in the css.

    I don’t see how it works either, but it’s working for me. Sorry, can you isolate the CSS and HTML outside of WordPress by using CSSDesk? Share us the CSSDesk link when you’re done.

    I’m sorry but how do I work with CSSDesk?

    Work off this
    http://cssdesk.com/KEeHn

    Try to get the font working there first.

    I’ve added some css and html code here: http://cssdesk.com/CmV9n

    It’s just a CSS sandbox where you can try out CSS.

    I suspect there’s an issue with the font files themselves.

    Starting with your link, what am I supposed to do? The font is not loading and when I add a space in the css font: declaration it’s still not loading.

    Try loading some other font files through font face.

Viewing 15 replies - 16 through 30 (of 43 total)
  • The topic ‘[Resolved] Fonts included with @font-face are not rendered’ is closed to new replies.