Font loads in one directory but not another in IE, Firefox. Works in Chrome

[Shem]

I thought this was a path issue. But it works in Chrome.
THE ISSUE IN QUESTION IS THE FONT ON THE DROP DOWN MENUS:

@font-face {
	font-family: 'BebasRegular';
	src: url('../fonts/BEBAS___-webfont.eot');
	src: local('☺'), url('../fonts/BEBAS___-webfont.woff') format('woff'), url('../fonts/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/BEBAS___-webfont.svg#webfontnqJLEELI') format('svg');
	font-weight: normal;
	font-style: normal;

IN CHROME IT WORKS EVERYWHERE:
http://getunrefined.com/blog/
and
[URL=“http://getunrefined.com/blog/”]http://getunrefined.com/index.shtml

but in firefox, this works:
http://getunrefined.com/index.shtml
BUT NOT THIS:
[URL=“http://getunrefined.com/blog/”]http://getunrefined.com/blog/

they ALL use the same style sheet. How can it be that it works in one directory and not the other? CSS files load resources relative to the stylesheet and not the file, correct ?
Why does this work on Chrome but nowhere else?

[ralphm]

The font is not appearing on either page for me in Firefox. I prefer to eliminate the guesswork with URLs by just using root-relative paths. I changed your paths to root relative and the fonts work fine that way, so go to your fonts.css file and change this (in red):

@font-face {
	font-family: 'BebasRegular';
	src: url('[COLOR="#FF0000"]../[/COLOR]fonts/BEBAS___-webfont.eot');
	src: local('☺'), url('../fonts/BEBAS___-webfont.woff') format('woff'), url('../fonts/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/BEBAS___-webfont.svg#webfontnqJLEELI') format('svg');
	font-weight: normal;
	font-style: normal;
}

to this:

@font-face {
	font-family: 'BebasRegular';
	src: url('[COLOR="#FF0000"]/[/COLOR]fonts/BEBAS___-webfont.eot');
	src: local('☺'), url('../fonts/BEBAS___-webfont.woff') format('woff'), url('../fonts/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/BEBAS___-webfont.svg#webfontnqJLEELI') format('svg');
	font-weight: normal;
	font-style: normal;
}

Do this for each font, of course. It’s just the src line you need to change for each.

[Shem]

@ralph … Which version of Firefox are you using? I made that change and it’s still not rendering properly in [URL=“http://getunrefined.com/blog/”]http://getunrefined.com/blog/

but it still works in http://www.getunrefined.com/index.shtml in Firefox.

[ralphm]

I’m using the latest Firefox (8). But I should have said to change all of those paths. I’m not sure which one FF uses, but I thiink it’s woff:

@font-face {
	font-family: 'BebasRegular';
	src: url('[COLOR="#FF0000"]/[/COLOR]fonts/BEBAS___-webfont.eot');
	src: local('☺'), url('[COLOR="#FF0000"]/[/COLOR]fonts/BEBAS___-webfont.woff') format('woff'), url('[COLOR="#FF0000"]/[/COLOR]fonts/BEBAS___-webfont.ttf') format('truetype'), url('[COLOR="#FF0000"]/[/COLOR]fonts/BEBAS___-webfont.svg#webfontnqJLEELI') format('svg');
	font-weight: normal;
	font-style: normal;
}

[Shem]

I was able to find out that Firefox uses truetype through trial and error.

I CHANGED ALL OF THEM TO /fonts/ BUT it only works in the site root in Firefox and IE. the [/LEFT]http://getunrefined.com/blog/ font loading fails in Firefox and IE. This is drivng me nuts ! I even tried absolute urls . nothing works. [LEFT][COLOR=#464646]

[/COLOR][/LEFT]

[ralphm]

I still think you’ve got one error/typo in your styles. You are missing a slash on the woff link (which I still think FF uses). If I change this:

@font-face {
  font-family: "BebasRegular";
  font-style: normal;
  font-weight: normal;
  src: local("☺"), url("[COLOR="#FF0000"]fonts/[/COLOR]BEBAS___-webfont.woff") format("woff"), url("/fonts/BEBAS___-webfont.ttf") format("truetype"), url("/fonts/BEBAS___-webfont.svg#webfontnqJLEELI") format("svg");
}

to this

@font-face {
  font-family: "BebasRegular";
  font-style: normal;
  font-weight: normal;
  src: local("☺"), url("[COLOR="#FF0000"]/fonts/[/COLOR]BEBAS___-webfont.woff") format("woff"), url("/fonts/BEBAS___-webfont.ttf") format("truetype"), url("/fonts/BEBAS___-webfont.svg#webfontnqJLEELI") format("svg");
}

it works in FF.

You’ve also lost the

src: url('/fonts/BEBAS___-webfont.eot');

line. What happened to that?! I think IE needs that one.

[Shem]

It’s encouraging that it’s working for you, which means I’m almost there.

here is my code:

@font-face {
font-family: ‘BebasRegular’;
src: url(‘/fonts/BEBAS___-webfont.eot’);
src: local(‘’), url(‘/fonts/BEBAS___-webfont.woff’) format(‘woff’), url(‘/fonts/BEBAS___-webfont.ttf’) format(‘truetype’), url(‘/fonts/BEBAS___-webfont.svg#webfontnqJLEELI’) format(‘svg’);
font-weight: normal;
font-style: normal;

is that what works for you ? can you check it now because it’s not working on this end.

[ralphm]

Hm, bizarre. It doesn’t work in FF, unless I go into Firebug and just click on the styles to edit them - without actually changing anything! But at that point the font loads. Really odd. Not sure what to suggest.

[Shem]

Ok one last thing, then I’ll leave you alone (appreciate the help, this is why I’ve been a member of SitePoint for nine years).
In Firebug console, I’m “tampering” with the font by going to “live edit” or whatever it’s called… can’t get the “presto” change you’re getting. That may be the RosettaStone for figuring out how to fix. May be a loading / DOM issue.

Can you tell me what you’re doing in Firefox to get it to change in real time? Thanks.

[ralphm]

No problem. Ask until you are satisfied!

It’s really bizarre, but what I do is open firebug, click on the CSS tab, then on the line below choose fonts.css, then top left choose Live Edit, then delete the first / and type it in again, and the fonts appear. Earlier I was editing what I thought was wrong paths and the fonts would appear, so I didn’t realize it was the fact that I was editing the styles that was making the fonts appear, rather than it being the file path that was causing it. Very odd. I recently set up FontSquirrel styles like this and they work fine, and they are exactly the same as what you’ve done, from what I can see.

[zelena]

Hi there

I’m just wondering if you managed to solve this issue? I am having a similar problem with the same font. Even more bizarrely, the font shows up fine when I type my url omitting the www - but disappears if I include the www portion. (This is on Firefox 9 for Mac). Very frustrating!

[ralphm]

It seems to be working in Firefox now.

[TechnoBear]

@zelena

Hi there

I’m just wondering if you managed to solve this issue? I am having a similar problem with the same font. Even more bizarrely, the font shows up fine when I type my url omitting the www - but disappears if I include the www portion. (This is on Firefox 9 for Mac). Very frustrating!

Hi zelena, and welcome to the forums.

Do you have a link to your site, so we can see what’s going on there?

[zelena]

Hi there

Thanks so much!

My site in progress is wsanet.net. (Careful - some of the menu links redirect to the live site).

It is actually working intermittently for me at the moment (not cache related, as far as I can tell). I can’t figure it out.

If you have any ideas, I’m all ears. I’m super appreciative for the help - thank you!

[system]

As a rule of thumb, and this is personal opinion – if you have to say …/ in your url’s inside the CSS, you have the files in the wrong place. Pathing “up-tree” is a sure indicator that there’s something fundamentally flawed with your directory structure…

Which is why usually I put files that would be called by my CSS in a subdirectory of where said CSS is located… then you don’t have to path it at all as it’s all “down-tree”.

See my normal directory structure for sites:

\ – HTML files and/or main PHP file. (usually the only file here is index.php and a htaccess, routing ALL requests through my single index.php)
\DOWNLOADS – self explanatory
\IMAGES – images that are CONTENT, aka belong in the HTML
\THEME – CSS files, template.php files
\THEME\FONTS – fonts included from the CSS
\THEME\IMAGES – images that are presentation, not content.

It’s a detail people often miss about CSS – it’s root directory is based on where the CSS file is located, NOT where the HTML calling it is. (unlike applets or javascript which use the same location as the calling HTML as their root).

It just makes it easier to test and to keep things portable to make sure everything ‘cascades down’ instead of constantly trying to point ‘up’ or absolutely… of course a lot of your off the shelf CMS shove bad directory structures down your throat… like wordpress… like joomla. Goes hand in hand with all the other bad practices they treat as the norm like dozens of separate CSS files, CSS inlined in the markup, and hundreds of K of javascript for nothing or broken inaccessible animated nonsense.

Like the broken menu appearing over the heading on your site… that doesn’t even work for people with scripting disabled.