cssfont-face

Font-Face use absolute path


Is it possible to use an absolute path with @fontace? I have the follow directory-structure:

-HP
|--font
|  |- Monoton.woff
|  |- Monoton.eot
|--css
|  |- font.css
|  |- fontface.css
|--html
   |-index.html

Defined the font-face

@font-face {
    font-familiy: Monoton;
    src: url('../font/Monoton.woff') format('woff'); // EDIT: Change fonts to font the name of th woff-file
    font-weight: normal;
    font-style: normal;
}

and used it in the css as class monoton:

@import url('fontFace.css');

.monoton {
    font-familiy: Monoton, cursive;
    font-size: 1.875em;
    color: rgba(0, 200, 0, 1);
}

but it doesn't works in chrome, Firefox and co. Can somebody explain me why? I have put the fontFace.css and all font-files in the html-directory. Now it will work..


Solution

  • First of all that's relative path and not absolute path, absolute path means using like http://whatever.com/fonts/font_file.woff and secondly it doesn't work because you have a folder called font where as you are using ../fonts/.

    Also, I see that file names do not match, you have a file called Monton.woff but you are using Monoton-Regular-webfont.woff, you need to change the file names accordingly and use the snippet below

    @font-face {
        font-family: Monoton;
        src: url('../font/Monoton-Regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }
    

    You can also use these fonts directly from google by including the below snippet in your stylesheet

    Demo

    @font-face {
      font-family: 'Monoton';
      font-style: normal;
      font-weight: 400;
      src: local('Monoton'), local('Monoton-Regular'), url(http://themes.googleusercontent.com/static/fonts/monoton/v4/AKI-lyzyNHXByGHeOcds_w.woff) format('woff');
    }