@fontface css font path does not seem to work

Question

I have a directory called project and in it i have the directories html,assets and javascript.The assets directory has the directories fonts and css.The css directory has a css file called typography.css.The fonts directory has all the fonts i am using.

Inside the html directory i have a file typography.html. To use the fonts i am using this code inside typography.css which is correctly linked/referenced in my html file.However this code inside typography.css

@font-face {
    font-family: "LatoLight";
    src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), url('../fonts/lato-light-webfont.woff') format("woff"), url('../fonts/lato-light-webfont.ttf') format("truetype"), url('../fonts/lato-light-webfont.svg') format("svg");
    }
    h1{ font-family: LatoLight !important; }

does not produce the desired result.I am using twitter bootstrap 3.Why is this not working?.

Have you tried putting the font files directly in the css folder and linking it there to see if there is any other issues other than the possible directory issue? — Andy Holmes, Oct 04 '13 at 08:28
Yes,i have done that too and that fails too.However when i use inline style inside my typography.html file and add all the fonts inside the html directly,voila it works but i need the fonts to be in the fonts directory. — You Know Nothing Jon Snow, Oct 04 '13 at 08:31

score 3 · Accepted Answer · edited May 23 '17 at 11:59

3

Try:

@font-face {
    font-family: 'LatoLight';
    src: url('../fonts/lato-light-webfont.eot') format("embedded-opentype"), 
         url('../fonts/lato-light-webfont.woff') format("woff"), 
         url('../fonts/lato-light-webfont.ttf') format("truetype"), 
         url('../fonts/lato-light-webfont.svg') format("svg");
    font-weight: normal;
    font-style: normal;
}

I've switched double quotes to single. It MIGHT make a difference but i am not sure.

otherwise this might help Bootstrap 3 unable to display glyphicon properly i know it's glyphicons but firefox might just be having issues regarding other fonts.

edited May 23 '17 at 11:59

Community

1
1

answered Oct 04 '13 at 08:43

Andy Holmes

7,817
10
50
83

1

The problem was `file origin policy` issue which was discussed here http://stackoverflow.com/a/19068467/2420583 in the question you linked.After setting this property `security.fileuri.strict_origin_policy` to false it now works. – You Know Nothing Jon Snow Oct 04 '13 at 08:51
Excellent, glad you got it sorted :) – Andy Holmes Oct 04 '13 at 08:53
1

This is very nice. With this approach you can override the original paths that bootstrap provides within your custom .less file and point the font files to wherever. – klewis May 02 '16 at 18:34

score 0 · Answer 2 · answered Oct 04 '13 at 08:11

0

I think it could be as simple as putting quotes around the font you want when you reference it.

h1{ font-family: "LatoLight" !important; }

answered Oct 04 '13 at 08:11

dijipiji

3,063
1
26
21

@fontface css font path does not seem to work

2 Answers2