Search code examples
cssfont-face

CSS @font-face rule

Here's my code. I establish the @font-face rule here:

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('chunk-webfont.eot');
    src: url('file:///C:/.../Fonts/chunk-webfont.eot?#iefix') format('embedded-opentype'),
         url('file:///C:/.../Fonts/chunk-webfont.woff') format('woff'),
         url('file:///C:/.../Fonts/chunk.ttf') format('truetype'),
         url('chunk-webfont.svg#ChunkFiveRegular') format('svg');
    font-weight: normal;
    font-style: normal;}

I assign to an element here:

#main-navi{
    font-family:'ChunkFiveRegular';}

And I call it in the HTML here:

<div id="main-navi" class="line">
    <ul class="line">
     <li>
       <a href="#work">Work</a>
     </li>
     <li>
       <a href="#play">Play</a>
     </li>
    </ul>

But the text is not displaying the ChunkFive font. Does anyone know what I'm doing wrong here?

Solution

  • Check if the fonts are at all accessible by the browser in firefox using the firebug plugin or developer tools in chrome (f12 and ctrl+shift+j respectively).

    Theres a good chance the file:/ uri just doesn't work correctly, considder using a relative uri to the fonts and check the capitalisation in your url.

    The css itself looks good (right out of fontsquirrel?). You might want to close that div but other than that should work in theory.