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 - 1 through 15 (of 43 total)
  • paulwpxp

    @paulwp

    Font hero

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

    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/

    paulwpxp

    @paulwp

    Font hero

    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

    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.

    paulwpxp

    @paulwp

    Font hero

    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.

    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?

    paulwpxp

    @paulwp

    Font hero

    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.

    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.

    paulwpxp

    @paulwp

    Font hero

    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 ?

    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.

    paulwpxp

    @paulwp

    Font hero

    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.

    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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

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