Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #18598

    I’ve popped this in the general pool as i’m assuming it will be the same for all kriesi templates: How do you make @font-face css work? I’ve got the Angular theme and it’s been working well but I’ve tried everything and cannot get it to work. (It works out side of the wordpress page).

    I have turned off the custom heading font in the theme styling options.

    I’ve spent hours trawling through WP forums and CSS forums trying to find the answer but I now suspect there is something special about this template that is preventing it from working.

    Firstly, here is the font working fine, referenced in the style tags in an html file:

    http://www.fishtankcreative.com.au/wp/wp-content/themes/angular/testfonts.html

    That “hello” is using the font perfectly.

    Obviously I can’t use style tags on each page, and it doesn’t even work in the html editor of my pages.

    I have tried: Adding it to the header.php as a link:

    <link rel=”stylesheet” href=”<?php echo get_bloginfo(‘template_url’); ?>/css/MyFontsWebfontsKit.css” type=”text/css” media=”screen”/>

    I’ve also tried this with the full path (before I moved the CSS file into the css folder):

    <link rel=”stylesheet” href=”http://www.fishtankcreative.com.au/wp/wp-content/themes/angular/MyFontsWebfontsKit.css” type=”text/css” media=”screen”/>

    I’ve also tried putting call @font-face direct from the CSS files, direct from the pages. Heck, I even tried adding the style to a widget to see if it would render.


    Outside wordpress, this works:

    <style>

    @font-face {

    font-family: ‘Sketchetik-Bold’;

    src: url(‘http://www.fishtankcreative.com.au/wp/wp-content/themes/angular/webfonts/250A47_0_0.eot?#iefix’) format(‘embedded-opentype’), url(‘http://www.fishtankcreative.com.au/wp/wp-content/themes/angular/webfonts/250A47_0_0.woff’) format(‘woff’), url(‘http://www.fishtankcreative.com.au/wp/wp-content/themes/angular/webfonts/250A47_0_0.ttf’) format(‘truetype’);

    }

    .Sketchetik-Bold {

    font-family: Sketchetik-Bold;

    font-weight: normal;

    font-style: normal;

    }

    </style>

    </head>

    <body>

    <p class=”Sketchetik-Bold”>Hello World!</p>

    <p> ghghgh </p>

    </body>


    But inside wordpress, it’s not.

    Is there are trick specific to the theme? I’m getting desperate.

    Thanks in advance

    #100091

    Discovered this problem was limited to FIrefox (the font was working all along in other browsers). A friend threw me his “bulletproof” @font-face code and it seemed whatever subtle differences it had from the one I copied from the myfonts webfont kit, it made all the difference:

    /* redefining fonts */

    @font-face {

    font-family: ‘Sketchetik-Light’;

    src: url(‘webfonts/250A47_3_0.eot’);

    src: url(‘webfonts/250A47_3_0.eot?#iefix’) format(‘embedded-opentype’),

    url(‘webfonts/250A47_3_0.woff’) format(‘woff’),

    url(‘webfonts/250A47_3_0.ttf’) format(‘truetype’);

    font-weight: normal;

    font-style: normal;

    }

    /* redefining fonts */

    h1, h2, h3, h4, h5, h6, div .callout {

    font-family: Sketchetik-Light;

    }

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Using @font-face within theme’ is closed to new replies.