Relative URL in @font-face source doesn't work

Question

I downloaded Delicious-Roman font and I want to use it in my CSS page. It doesn't seem to work with relative URL, but when i placed it in same folder as my CSS page, it worked! My folders look like this:

-Project
   -Fonts
       -Delicious-Roman.otf
   -Folder
       -Project.html
       -ProjectStyle.css

So I did this:

@font-face{
   font-family: Delicious;
   src: url(../Fonts/Delicious-Roman.otf);
}
div{
   font-family: Delicious;
}

But it doesn't work. When i put Delicious-Roman.otf in Folder and do this:

 @font-face{
   font-family: Delicious;
   src: url(Delicious-Roman.otf);
}
div{
   font-family: Delicious;
}

its all good and it works. Also I've seen people put format(otf); next to the src, but i don't know why.

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

You are probably testing this in Firefox. Try Chrome and it will work. For the Firefox fix, see: Bootstrap 3 unable to display glyphicon properly

edited May 23 '17 at 11:58

Community

1
1

answered May 14 '15 at 22:22

Thinkstr8

126
4

I was able to make it work on my machine with the exact same font. Yes on Chrome, not on Firefox. Did you also make sure that the capitalization matches on your folder/file names? I use lowercase on everything to avoid that problem. – Thinkstr8 May 14 '15 at 22:39
Woops, sorry again. It works in chrome. I had a typo. Fix works too! Thanks! – Dusan Jovicic May 14 '15 at 22:40

Relative URL in @font-face source doesn't work

1 Answers1