I'm working on a website that has a custom font, and I've implemented the @font-face code as shown below:
@font-face {
font-family: 'webfontregular';
src: url('fonts/cracked-webfont.eot');
src: url('fonts/cracked-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/cracked-webfont.woff') format('woff'),
url('fonts/cracked-webfont.ttf') format('truetype'),
url('fonts/cracked-webfont.svg#webfontregular') format('svg');
font-weight: normal;
font-style: normal;
}
However, when the website is live, the font doesn't display properly in Firefox.
Here's what I've tried so far:
1- I attempted to use both relative and absolute URLs for the font files like
url('../../../fonts/cracked-webfont.eot');url('http://example.comfonts/cracked-webfont.eot');2- I moved the CSS file containing the font code to the root directory, which seemed to work.
I'm curious why the font code only functions correctly when the CSS file is in the root directory, even though I'm using relative URLs. Could it be due to Firefox not supporting cross-domain font web references?