@font-face firefox issue

[Eye seven]

Hi,

So I am currently working on a site that I have to follow the corporate style guide for font use. No worries as @font-face has come to the rescue but its the first time in using it and it looks like I have a small issue.

I am currently testing the site on my local machine across IE 7-9, Chrome, Opera, Safari and Firefox. All work perfectly except I have an issue with Firefox - I am currently using 10.0.1 which is the latest version. If I load a page the fonts default to the Helvetica system font. This is the same on all pages except the home page where it works as expected. This seems odd in itself as it surely should either work or not work but it gets stranger.

I use the menu to browse other pages and the pages viewed will all use the system font until I view the home page. Once I have visited the home page and then view any other pages in the site it then uses my @font-face fonts absolutely perfectly.

Anybody out there have a similar issue or have heard of it or even better a solution? Is this only happening as I am browsing on my local machine and will work perfectly once uploaded? Any help would be appreciated. It's really bugging me that IE7-9 work perfectly and Firefox is giving me an issue!

If it helps here is the font stack I am using:

font: 100% "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'Interval Light', "Helvetica", "Arial", sans-serif;

My @font-face declarations are all declared right at the top of my CSS right after my reset as I thought that might make a difference. My @font-face code looks like:

@font-face {
	font-family: 'Interval Light';
	src: url('../fonts/Interval Light.eot'); /* IE9 Compat Modes */
	src: url('../fonts/Interval Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('../fonts/Interval Light.woff') format('woff'), /* Modern Browsers */
	     url('../fonts/Interval Light.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('../fonts/Interval Light.svg#svgInterval Light') format('svg'); /* Legacy iOS */
}

So, anyone any ideas?

 

[fez]

Would probably be able to help if you could post a link to the site but I guess that you can't do that...

 

[Eye seven]

Sadly true currently but it should be live end of the week. Was hoping to fix the issue before then though ...

 

[simisker]

If I load a page the fonts default to the Helvetica system font

Given the font stack you've declared, I'm not surprised!

This is the same on all pages except the home page where it works as expected.

As expected? Do you mean "It uses the font 'Interval Light'"? Because if so, that's *not* expected behaviour from that stack. Not if it's recognising one of the many Helvetica Neue variants you've declared ahead of it.

If that font stack is declared site-wide, and you've got a matching Helvetica Neue variant on your system [as you've confirmed with other pages], then you shouldn't ever see Interval Light. Not once. In any browser. On any page.

So, anyone any ideas?

Given the high probability of the corporate branding font being Helvetica Neue, and the determination to find it in your font stack declaration, I'm wondering why you're bothering with an 'exotic' @font-face font that bears only a passing resemblance to Helvetica in the first place! Does it *really* need to be there at all?

Sorry I've not addressed your problem directly, though hopefully I've given you a lateral-thinking way out

EDIT: On the off-chance that the font you want to be displayed at all times *is* 'Interval Light', then it really needs to be first in the stack. In case you weren't aware

 

[spengos]

I've come across this before. Firefox can be awkward with @font-face. It's usually down to a path issue(declaring where the font files are on your server) as FF tends to try and guess where they are. I expect its having trouble with the "../".

There's a lot of handy info in this post on SO. read through the whole post as there are more solutions further down. Try some of these techniques and you should get it working.

 

[Eye seven]

Many thanks for the replies.

@simisker - yeah, it is quite a stack. The font I really need is Helvetica Neue Light 45 so the chances of having that on most systems will be slight to none. The Interval font isn't a bad match for that so I was throwing it in as a good fallback. On reflection I think you are right - I'll just get it to default to Interval.

@spengos - thanks, that is the info I was needing. Looks like it should work fine on upload but if not I'll change font directory.