Grrr... Font-face and Firefox 3 and 4

iMeow · February 2, 2011, 1:08pm

I am feel like I’m going insane. There are probably tons of people that ask similar questions here every week but for the life of me I cannot figure out why this isn’t working. I’ve turned to Google and searched the forms but cannot figure out what I’m doing wrong.

I have used @font-face to embed Myraid Pro (Font Squirrel’s @font-face generator did most of the work). It works perfectly fine in Internet Explorer 8 but the font refuses to load in Firefox 3 (I mean the latest subversion of FF 3) and 4. As far as I know Firefox has @font-face support from version 3.5 so it should work.

Below is my code:


@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-regular-webfont.eot');
	src: local('&#9786;'), url('fonts/myriadpro-regular-webfont.woff') format('woff'), url('fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('fonts/myriadpro-regular-webfont.svg#webfontFQGeCYfO') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-semibold-webfont.eot');
	src: local('&#9786;'), url('fonts/myriadpro-semibold-webfont.woff') format('woff'), url('fonts/myriadpro-semibold-webfont.ttf') format('truetype'), url('fonts/myriadpro-semibold-webfont.svg#webfontFQGeCYfO') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-it-webfont.eot');
	src: local('&#9786;'), url('fonts/myriadpro-it-webfont.woff') format('woff'), url('fonts/myriadpro-it-webfont.ttf') format('truetype'), url('fonts/myriadpro-it-webfont.svg#webfontFQGeCYfO') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-semiboldit-webfont.eot');
	src: local('&#9786;'), url('fonts/myriadpro-semiboldit-webfont.woff') format('woff'), url('fonts/myriadpro-semiboldit-webfont.ttf') format('truetype'), url('fonts/myriadpro-semiboldit-webfont.svg#webfontFQGeCYfO') format('svg');
	font-weight: bold;
	font-style: italic;
}

body {
	font-family: MyriadPro, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	color: #3d4042;
}

I’ve double check the syntax and triple checked that the paths to the fonts are correct. If you’d like to take a look at the page itself: http://valuepetclinic.com/.

Attached are screenshots of how the font is rendered in IE versus FF. Any help would be greatly appreciated!

ralphm · February 2, 2011, 1:38pm

Hmm, one thing that looks at tad sus to me is that each font-family is the same, that is

font-family: ‘MyriadPro’;

When I’ve used this sort of setup, each font-family is different, such as

font-family: ‘MyriadPro-bold’.

Don’t know if that has anything to do with it. But each of those fonts is different, so it’s going to confuse the browser (I would think) to call on each one with the same name. I’m used to calling on each one individually by name when citing it in the font-family list.

EDIT: I just did a test, and renamed the first one (regular) as font-family: ‘MyriadPro-regular’, then cited MyriadPro-regular on the body element and the font kicked in. I did this via Firebug in Firefox.

iMeow · February 2, 2011, 2:10pm

I don’t know if that is an issue. As far as I know, you can use the same font-family name as long as you change the font-weight and font-style properties. This instructs the browser which font file to use when you make specify the font to be bold, italic or bold italic. However, I will try that and see if it doesn’t fix the issue as soon as I get home.

I did notice something really peculiar though. If you try to view www.valuepetclinic.com instead of [URL=“http://valuepetclinic.com”]valuepetclinic.com (notice the www) it works! In IE both variations of the URL work. I really don’t see why that would happen.

ralphm · February 2, 2011, 2:20pm

That’s freaky.

Anyhow, when you are using a specific font (such as an italic font) I think it’s better to specify

font-weight: normal;
font-style: normal;

than something like font-style: italic. That’s how font squirrel often pushes them out, anyway. If it’s a specifically italic font, that’s it’s normal state, so calling on italic seems either wrong or at least redundant. Mind you, I’m an ignorant ass, talking through my hat here, so hopefully someone who actually know will come along! Short of that, though, I’d suggest giving each font a unique name and setting font weight and style to normal. Worth a try, anyhow. It certainly worked via Firebug.

iMeow · February 2, 2011, 2:39pm

Okay, I tried it. I basically stripped out the different variations leaving just:


@font-face {
	font-family: 'MyriadPro';
	src: url('fonts/myriadpro-regular-webfont.eot');
	src: local('&#9786;'), url('fonts/myriadpro-regular-webfont.woff') format('woff'), url('fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('fonts/myriadpro-regular-webfont.svg#webfontFQGeCYfO') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: MyriadPro, Helvetica, Arial, sans-serif;
	font-size: 10pt;
	color: #3d4042;
}

Still has exactly the same behavior. As soon as you load the website URL with www in front it works. Otherwise, Myraid Pro does not load.

ralphm · February 3, 2011, 12:45am

My main advice, though, was to give each font a specific name, and then call on that name when you need it:

@font-face {
    font-family: [COLOR="Red"]'MyriadPro-regular';[/COLOR]
    src: url('fonts/myriadpro-regular-webfont.eot');
    src: local('&#9786;'), url('fonts/myriadpro-regular-webfont.woff') format('woff'), url('fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('fonts/myriadpro-regular-webfont.svg#webfontFQGeCYfO') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
    font-family: [COLOR="Red"]MyriadPro-regular[/COLOR], Helvetica, Arial, sans-serif;
    font-size: 10pt;
    color: #3d4042;
}

If you wanted a heading to use bold Myriad, then this:


@font-face {
    font-family: '[COLOR="Red"]MyriadPro-bold[/COLOR]';
    src: url('fonts/myriadpro-semibold-webfont.eot');
    src: local('&#9786;'), url('fonts/myriadpro-semibold-webfont.woff') format('woff'), url('fonts/myriadpro-semibold-webfont.ttf') format('truetype'), url('fonts/myriadpro-semibold-webfont.svg#webfontFQGeCYfO') format('svg');
    font-weight: normal;
    font-style: normal;
} 

h1 {font-family: [COLOR="Red"]MyriadPro-bold[/COLOR], sans-serif}

iMeow · February 3, 2011, 4:40am

ralph_m:

My main advice, though, was to give each font a specific name, and then call on that name when you need it:

@font-face {
    font-family: [COLOR="Red"]'MyriadPro-regular';[/COLOR]
    src: url('fonts/myriadpro-regular-webfont.eot');
    src: local('&#9786;'), url('fonts/myriadpro-regular-webfont.woff') format('woff'), url('fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('fonts/myriadpro-regular-webfont.svg#webfontFQGeCYfO') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
body {
    font-family: [COLOR="Red"]MyriadPro-regular[/COLOR], Helvetica, Arial, sans-serif;
    font-size: 10pt;
    color: #3d4042;
}

If you wanted a heading to use bold Myriad, then this:


@font-face {
    font-family: '[COLOR="Red"]MyriadPro-bold[/COLOR]';
    src: url('fonts/myriadpro-semibold-webfont.eot');
    src: local('&#9786;'), url('fonts/myriadpro-semibold-webfont.woff') format('woff'), url('fonts/myriadpro-semibold-webfont.ttf') format('truetype'), url('fonts/myriadpro-semibold-webfont.svg#webfontFQGeCYfO') format('svg');
    font-weight: normal;
    font-style: normal;
} 

h1 {font-family: [COLOR="Red"]MyriadPro-bold[/COLOR], sans-serif}

Oh no, I do realize that. For testing purposes, though, I thought it would be easier to just remove the other fonts. Removing them should have the same effect as renaming them - preventing any conflicts. But, alas, that failed to solve the problem.

ralphm · February 3, 2011, 5:08am

OK, I just tried something else, which worked via Firebug. Remove the quotes around the name MyriadPro. You only need quotes around a font name if there’s a gap between two words. I think that’s confusing the browser, because ‘MyriadPro’ as a name is not the same as MyriadPro.

@font-face {
    font-family: [COLOR="Red"]MyriadPro[/COLOR]; [COLOR="Green"]/* no quotes! */[/COLOR]
    src: url('fonts/myriadpro-regular-webfont.eot');
    src: local('&#9786;'), url('fonts/myriadpro-regular-webfont.woff') format('woff'), url('fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('fonts/myriadpro-regular-webfont.svg#webfontFQGeCYfO') format('svg');
    font-weight: normal;
    font-style: normal;
}

iMeow · February 3, 2011, 12:25pm

ralph_m:

OK, I just tried something else, which worked via Firebug. Remove the quotes around the name MyriadPro. You only need quotes around a font name if there’s a gap between two words. I think that’s confusing the browser, because ‘MyriadPro’ as a name is not the same as MyriadPro.
@font-face {
    font-family: [COLOR="Red"]MyriadPro[/COLOR]; [COLOR="Green"]/* no quotes! */[/COLOR]
    src: url('fonts/myriadpro-regular-webfont.eot');
    src: local('&#9786;'), url('fonts/myriadpro-regular-webfont.woff') format('woff'), url('fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('fonts/myriadpro-regular-webfont.svg#webfontFQGeCYfO') format('svg');
    font-weight: normal;
    font-style: normal;
} 

Thanks, I’ll try that too as soon as I can.

iMeow · February 3, 2011, 2:05pm

Nope, still doesn’t work even after the quotations are removed. This is a really weird situation.

TomB · February 3, 2011, 4:05pm

what is the smiley face in local() for? Shouldn’t that be :\ or similar?

iMeow · February 3, 2011, 4:09pm

It is what font squirrel generates. I don’t think it matters what it is as long as it is fairly unlikely for a font to be installed on the user’s computer with that same name.

Topic		Replies	Views
@font-face problem HTML & CSS	17	1754	February 19, 2010
IE8 And Chrome vs. Firefox Font Squirrel HTML & CSS	42	3251	October 8, 2014
Poor rendering of @font-face HTML & CSS	1	441	April 1, 2010
Font Squirrel Fonts HTML & CSS	28	4438	October 8, 2014
External @font-face in Firefox HTML & CSS	5	629	February 19, 2011

Grrr... Font-face and Firefox 3 and 4

Related topics