View Full Version : @Font-Face fonts disappear in FireFox when used on subpages

Nov 4th, 2010, 06:43 AM
I am using the @font-face property to spice up the appearance of my website headers. They display just fine on the home page when viewed in FF, Chrome, & IE (latest versions).

The only time my headers don't display the @font-face is when I'm using FF and viewing a subpage on my site (which is inside a folder of the main directory). However, they seem to appear just fine when I view this same page in Chrome & IE.

I remember somebody mentioning something about how FF will only allow @font-face fonts to display if they're in the same directory or something? Could somebody please help me out with this?

Here is a simple breakdown of my site structure:







(Please note that this site has not been uploaded yet, so you won't be able to view it in your browser.)

I created project1.html from the project-details-template.dwt (Dreamweaver Template). The CSS file is correctly referenced in the Template because everything shows up great except for the @font-face.

Please let me know, why is FF not displaying the @font-face on my project1.html subpage headers?


Nov 4th, 2010, 11:59 AM
In your @font-face property in your css, how are you referring to the src file? You mighttry making this an absolute reference if it isn't already.

Nov 5th, 2010, 03:03 AM
Hi SB65, thanks for your response.
This is how it's set up in my CSS:

@font-face {
font-family: 'BebasNeueRegular';
src: url('../css/type/BebasNeue-webfont.eot');
src: local('☺'),
url('../css/type/BebasNeue-webfont.woff') format('woff'),
url('../css/type/BebasNeue-webfont.ttf') format('truetype'),
url('../css/type/BebasNeue-webfont.svg') format('svg');

What do you mean by an 'absolute reference'?

Nov 5th, 2010, 10:17 AM
An absolute reference starts from the root of your site wherever the calling file is located, as opposed to a relative reference which shows the path to the file from that of the calling file. In your case, assuming the css folder is in the root folder, you could try:

@font-face {
font-family: 'BebasNeueRegular';
src: url('/css/type/BebasNeue-webfont.eot');
src: local('☺'),
url('/css/type/BebasNeue-webfont.woff') format('woff'),
url('/css/type/BebasNeue-webfont.ttf') format('truetype'),
url('/css/type/BebasNeue-webfont.svg') format('svg');

Nov 12th, 2010, 07:53 PM
I think I tried doing that, but the problem is that the subpage 'projects1.html' isn't just sitting top level in the root, it's in a 'projects' folder (which is top level in the root).

So if I used the code you supplied, wouldn't it try to find a 'css' folder within the 'projects' folder?

& a side question:
What do those two periods in the start of the reference path mean? Is that telling the reference to start from the root?

Nov 13th, 2010, 08:52 AM
The periods are relative, they'll go up a level from the current page - so the target file location will vary dependent on where the cllaing file is located. Using absolute references gets around this, because the root is always the root wherever the calling page is located.

So the code above will always look for a folder called css in the root, wherever it's called from.

Nov 15th, 2010, 09:06 AM
Alright, I have tried that code and it doesn't appear to be working for me. Now, the @font-face doesn't even work on the home page either.

I have actually uploaded my site online so you can take a look at the HTML and CSS.


If you click on one of the first 3 projects in the 'Work' section it will take you to the temporary 'project1.html' page that I am having trouble with.
All images and copy on the site are just placeholders for now.

I appreciate the time and effort you are putting in to help me :)

Nov 15th, 2010, 09:16 AM
That looks fine to me - your font BebasNeueRegular shows up on both the Home page and Project1 page in the menu, using FF3.

Nov 15th, 2010, 05:33 PM
Hmm. That's odd. I am now on my work computer (a Mac) and it is showing up right for me too in FF. However when I am at home on my PC, it doesn't display correctly.

What OS are you running and do you think that could have something to do with it? I am also noticing that when I'm viewing my site in FF on my work Mac, the nav buttons at the top (Work, About, Blog, Contact) are flush up against the top of the nav bar, whereas in FF on my PC they are floating in the middle of it like they should.

Nov 15th, 2010, 05:54 PM
FF3 on Win XP. The Nav buttons are in the middle for me too.

Hypothesising wildly, do you have the font loaded natively on your home PC - and it's got corrupted somehow?

Re the Mac difference in the button positioning, don't know, sorry. Something to do with Macs and ttf files? Just guessing.

Nov 15th, 2010, 11:19 PM
It works for me too. Did you hard-refresh on your home PC?

Nov 16th, 2010, 07:14 AM
Wow, well I'm not sure why, but it appears to be working for me now (Firefox on my home PC running Windows 7). I have no idea why, but I'm just going to accept it.

I did just try reinstalling the BebasNeue font on my computer so maybe you were right in that the file was corrupted on my machine.

Thanks so much for your help guys!:thumbsup: