Font-Face use absolute path

Question

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..

Answer 1

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