@font-face is not working as it should

Question

So I use some really neat typefaces, and I have never had any problem with @font-face before, however, these just doesn't seem to work. :( Any ideas what went wrong?

Path to CSS: http://carlpapworth.com/friday-quiz/css/style.css

Path to Fontsfolder: http://carlpapworth.com/friday-quiz/css/fonts

@font-face {
font-family: silverfake;
font-weight: 100;
font-style: normal;
src: url('fonts/silverfake.otf');
}

@font-face {
font-family: molesk;
font-weight: 100;
font-style: normal;
src: url('fonts/molesk.otf');
}

@font-face {
font-family: ballpark;
font-weight: 100;
font-style: normal;
src: url('fonts/ballpark.TTF') format("truetype");
}

you can upload your font kit here http://www.fontsquirrel.com/tools/webfont-generator and after download you can just copy paste their css from the download folder — Atif Azad, Mar 19 '13 at 09:26
Check out my answer here: http://stackoverflow.com/questions/14287465/font-face-not-loaded/14287894#14287894 Could be a few different reasons. — 97ldave, Mar 19 '13 at 09:30
Font folder missing: “The requested URL /friday-quiz/css/fonts was not found on this server.” — Jukka K. Korpela, Mar 19 '13 at 10:06

score 0 · Answer 1 · answered Mar 19 '13 at 09:13

0

You probably didn't link to the fonts correctly. It's usually something small like;

src: url('../fonts/silverfake.otf');

instead of

src: url('fonts/silverfake.otf');

Try using fontsquirrel webfont generator to make sure everything is linked correctly, and is browser friendly.

answered Mar 19 '13 at 09:13

Jefferson

993
2
16
35

Not in his case I think, see his links. – Linus Caldwell Mar 19 '13 at 09:14
the links require me to login. couldn't check them out. – Jefferson Mar 19 '13 at 09:16
Me neither, but you can see that his fonts folder is inside the css folder. – Linus Caldwell Mar 19 '13 at 09:17

score 0 · Answer 2 · edited Mar 19 '13 at 09:27

0

Found at least an answer to getting Molesk working:

@font-face {
font-family:"molesk";
src:url("molesk.eot?") 
format("eot"),url("molesk.woff") 
format("woff"),url("molesk.ttf") 
format("truetype"),url("molesk.svg#molesk") 
format("svg");
font-weight:normal;
font-style:normal;}

edited Mar 19 '13 at 09:27

97ldave

5,249
4
25
39

answered Mar 19 '13 at 09:14

Carl Papworth

1,282
2
16
35

@font-face is not working as it should

2 Answers2