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

  • Resolved seeurope

    (@seeurope)


    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)
  • seeurope

    (@seeurope)

    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” />

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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?

    seeurope

    (@seeurope)

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    RobotoCondensed

    seeurope

    (@seeurope)

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    seeurope

    (@seeurope)

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

    seeurope

    (@seeurope)

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    Try to get the font working there first.

    seeurope

    (@seeurope)

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

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

    seeurope

    (@seeurope)

    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.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Try loading some other font files through font face.

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