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

Please give a link to your page so that we can see what happens. — MrUpsidown, Jan 21 '14 at 09:04
Actuell it's only offline available... In few days I add a link to the website — Andreas, Jan 21 '14 at 10:35

score 11 · Accepted Answer · edited Aug 05 '15 at 07:17

11

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

edited Aug 05 '15 at 07:17

AntK

1,038
1
9
22

answered Jan 21 '14 at 07:27

Mr. Alien

147,524
33
287
271

@user2457241 So I will need a demo, cuz that's all I can help by seeing the provided codee – Mr. Alien Jan 21 '14 at 07:41
http://jsfiddle.net/dBskw/ is my used code but I don't know how i can add the files to fiddle.. so I can you only show my used code – Andreas Jan 21 '14 at 07:49
The Monoton-Style is only one of my used and not all I used are available on google – Andreas Jan 21 '14 at 07:54
@user2457241 So I won't be able to make out unless you upload it on some server or provide me files using dropbox – Mr. Alien Jan 21 '14 at 07:56
I have send you an e-mail – Andreas Jan 21 '14 at 08:07

score 0 · Answer 2 · answered Apr 10 '14 at 15:54

0

You have a typo :

font-familiy: Monoton;

answered Apr 10 '14 at 15:54

ofaurax

1,226
1
19
25

Font-Face use absolute path

2 Answers2

Linked