WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Fonts included with @font-face are not rendered (44 posts)

  1. seeurope
    Member
    Posted 1 year 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! :)

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    Do you have at least one element in your site that has its CSS telling it to use that font-family ?

  3. seeurope
    Member
    Posted 1 year ago #

    Sure, for example:

    .menu ul li a {
    					color: #7f7f7f;
    					display: block;
    					height: 34px;
    					font: 15px normal "Roboto Condensed";
    					line-height: 34px;
    
    				}

    You can inspect the code for yourself: http://eventinvestment.eu/home/

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    The reference to the font directory and its css is wrong, because it returns /home/, which is different from the directory you installed WP, in it too.

    Try get_stylesheet_directory_uri
    http://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

  5. seeurope
    Member
    Posted 1 year ago #

    If I understand you right, I should have:

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

    No effect with this either.

    EDIT: Tried with "echo get_stylesheet_directory_uri();". Still no effect.

  6. paulwpxp
    Font hero
    Posted 1 year ago #

    The site now loads that stylesheet correctly, but the font reference inside CSS ( under @font-face ) doesn't point to it. I saw 2 references to @font-face, one in your chidtheme's style and one in /fonts/fonts.css

    So just leave out one (we only need one) and make sure the path to fonts is correct. If there is no other reason to keep the font in font folder under the theme, try put it under root, it's easier to refer to.

  7. seeurope
    Member
    Posted 1 year ago #

    Thanks for confirming on the path to fonts.css, I still wasn't sure if that isn't the problem. I was using two @font-face declarations with the hope that at least one will be right. I've now left only the one in fonts.css but the font still doesn't render.

    When you say "put it under root" what root is this: /public_html, /wp-content/, or /wp-content-theme?

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    Could you try put in the full path to fonts in the src url under @font-face ?

    And also, does your site prevent direct linking ?

    For example, an image refered via CSS like this

    .hdr .light {
    background: url("images/bg-hdr.png") no-repeat scroll 0 -33px transparent;
    }

    when pulled directly, returns 404.

  9. seeurope
    Member
    Posted 1 year ago #

    1. What is direct linking? :)
    2. How can I find out if my site allows it or not?

    I tried putting the full url: http://eventinvestment.eu/wp-content/themes/eventinvestment/fonts/ before the name of the font file in the fonts.css file but this didn't produce any results and I read forum entries where people say absolute urls don't work for them but relative ones do. To demonstrate, I've placed the full urls in the css now. What baffles me is the same url that the browser can use to download the font file doesn't work for WP.

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    The direct linking protection, you can see it in cpanel, actually it's htaccess thing.

    I found out something else too, the fonts you use, the name of the font files and the name of the font family doesn't match.

    This is what you have under this
    http://(yoursite)/wp-content/themes/eventinvestment/fonts/

    robotocondensed-regular-webfont.eot
    robotocondensed-regular-webfont.svg
    robotocondensed-regular-webfont.ttf
    robotocondensed-regular-webfont.woff

    I can't find this same font file name of roboto at fontsquirrel, I tried download robotocondensed-regular-webfont.ttf from your site and view it, the font name is saying "Roboto Condensed Regular"

    but in your CSS now, this for example

    .menu ul li a {
        font: 15px/34px "Roboto Condensed";
    }

    So the name doesn't match.

    I download the whole zip of roboto from fontsquirrel, and it doesn't have robotocondensed-regular-webfont, so I wonder where you get that set of fonts from ?

  11. seeurope
    Member
    Posted 1 year ago #

    My cPanel says: "Hotlink protection is currently disabled."

    I got the ttf font over email from the designer. The font itself is available in Google Web Fonts. I've linked to Google Web Fonts in a currently commented line in my header.php

    <!-- <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,700italic,400,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css' />-->

    When I use this way to load the font it works in all browsers except IE (any version), that's why I decided to try to load them with @font-face.

    As far as I know, there is no relation between the font's name as written in the font file and the font family name used in the css. The only pair of font family names that has to match is what's declared in the @font-face declaration and what's used in the css classes.

  12. paulwpxp
    Font hero
    Posted 1 year ago #

    You are right on the name part. Now that the src url under @font-face is full complete path and reachable directly, but still the font doesn't render. This one is well over my head, at this moment I can't think of something else (other than the font itself).

    So for others who spot something that might fix this, please don't hesitate to provide the solution or idea.

  13. seeurope
    Member
    Posted 1 year ago #

    I see. Thank you very much for taking the time to try. My suspicions are directed towards some WordPress setting I don't know, because as I said, I'm able to load the font's demo when I unarchive the zip from fontsquirrel into a dir on the server and open the .html file. The only difference I see is that the html isn't loaded by WordPress.

    I'm having another issue with not being able to reference an .htc file I'm trying to use to make IE7 read css3 rules, so I wonder if the whole issue isn't related to .htaccess settings, although I haven't touched the default .htaccess I have in my public_html dir. I've opened another topic about the .htc file here: http://wordpress.org/support/topic/attempting-to-include-an-htc-file-for-ie-css3-compatibility?replies=1

  14. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Sorry for being lazy, but can you summarise your Font Face issues you still experience after Paul's help?

  15. seeurope
    Member
    Posted 1 year ago #

    Thanks for the amazing support :) Things are mostly where they were when we started, I've only updated the quoted code and added a point that hotlinking is disabled:

    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('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;
    }

    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 echo get_stylesheet_directory_uri(); ?>/fonts/fonts.css" />

    I've checked and my server's hotlinking protection is disabled.

    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.

  16. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Where are you importing the font.css file from? I can't see it either in your style.css file or webpage.

  17. seeurope
    Member
    Posted 1 year 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" />

  18. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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?

  19. seeurope
    Member
    Posted 1 year ago #

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

  20. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

    RobotoCondensed
  21. seeurope
    Member
    Posted 1 year 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.

  22. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

  23. seeurope
    Member
    Posted 1 year 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.

  24. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year 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.

  25. seeurope
    Member
    Posted 1 year ago #

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

  26. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

    Try to get the font working there first.

  27. seeurope
    Member
    Posted 1 year ago #

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

  28. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

  29. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

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

  30. seeurope
    Member
    Posted 1 year 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.

Topic Closed

This topic has been closed to new replies.

About this Topic