Fonts included with @font-face are not rendered

  • Resolved seeurope

    (@seeurope)


    11 years ago

    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)
1 2 3
  • Thread Starter seeurope

    (@seeurope)

    11 years ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    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?

    Thread Starter seeurope

    (@seeurope)

    11 years ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

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

    RobotoCondensed

    Thread Starter seeurope

    (@seeurope)

    11 years ago

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

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

    Thread Starter seeurope

    (@seeurope)

    11 years ago

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    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.

    Thread Starter seeurope

    (@seeurope)

    11 years ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

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

    Try to get the font working there first.

    Thread Starter seeurope

    (@seeurope)

    11 years ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

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

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

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

    Thread Starter seeurope

    (@seeurope)

    11 years ago

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years ago

    Try loading some other font files through font face.

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