IE6 ignoring embedded font

shiftless · July 14, 2011, 8:00pm

I have a test page up here:

IE7, 8 and 9 see the embedded font file fine, but IE6 ignores it. I can’t figure out why. This is the css for the embedded font:

@font-face {
	font-family: 'DroidSans';
	src: url(/shared/css/droidsans/DroidSans.eot);
	src: local('Droid Sans Regular'), local('DroidSans'), url(/shared/css/droidsans/DroidSans.ttf) format('truetype');
}

@font-face {
	font-family: 'DroidSans';
	font-weight: bold;
	src: url(/shared/css/droidsans/DroidSans-Bold.eot);
	src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(/shared/css/droidsans/DroidSans-Bold.ttf) format('truetype');
}

And it’s usage in the CSS is here:

body{	
	text-align: center;
	min-width: 1107px;/* for mozilla*/
	background-color: #000000;
	color: #ffffff;
	font-family: "DroidSans", arial, helvetica, verdana, sans-serif;
	font-size: 62.5%; /*Sets all fonts to roughly 10px*/
	letter-spacing: normal;
}

Anybody have any ideas why IE6 doesn’t use the embedded font?

system · July 15, 2011, 12:05am

Well, since you wouldn’t see those in FF, Opera or webkit either… I’d suspect there’s something wrong with your embed method.

The use of multiple SRC declarations could be a contributing factor when you only have one target. There’s a reason I like the “fontsprint syntax” for handling that. It’s pretty much bulletproof everywhere.


@font-face {
	font-family:'MyFontFamily';
	src:url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	    url('myfont-webfont.woff') format('woff'), 
	    url('myfont-webfont.ttf')  format('truetype'),
	    url('myfont-webfont.svg#svgFontName') format('svg');
}

Which for your situation would go thus:


@font-face {
	font-family:'DroidSans';
	font-weight:normal;
	src:url('/shared/css/droidsans/DroidSans.eot'),
	    url('/shared/css/droidsans/DroidSans.woff') format('woff'), 
	    url('/shared/css/droidsans/DroidSans.ttf')  format('truetype'),
	    url('/shared/css/droidsans/DroidSans.svg#DroidSans') format('svg');
}

@font-face {
	font-family:'DroidSans';
	font-weight:bold;
	src:url('/shared/css/droidsans/DroidSans-Bold.eot'),
	    url('/shared/css/droidsans/DroidSans-Bold.woff') format('woff'), 
	    url('/shared/css/droidsans/DroidSans-Bold.ttf')  format('truetype'),
	    url('/shared/css/droidsans/DroidSans-Bold.svg#DroidSans') format('svg');
}

If you don’t have the formats for other browsers, font squirrel does a great job on conversions and even gives you sample code to work from.

Pretty much your entire second line of “src” is probably what’s messing things up… given what a rare/uncommon font droidsans is, I’d not even waste time TRYING to check for a local copy.

Oh, and be sure it’s the VERY FIRST THING in your CSS, or it may get ignored in legacy browsers – needs to go before ALL other code… including @charset – not that there is ANY reason to use @charset since valid CSS is restricted to ASCII7… meaning the character encoding should be a total non-issue!

system · July 15, 2011, 12:08am

Oh, and your font links for IE6- are 403… that could be it…

http://www.aftermath-creative.com/shared/css/droidsans/DroidSans.eot

Pookah.

Probably the ONLY reason it’s working for you in IE7+ is the check for the local copy, since the TTF link is also macha pookah. I’m not seeing them here in ANY version of IE because I don’t have that font installed locally. Again, probably why I don’t bother with checking for ‘local’ is you can’t test if the web version is working with those present.

– edit – oh, and if you have to target EVERY version of IE with it’s own stylesheet and IE conditionals, there is likely something DISASTROUSLY wrong with how you’re trying to build the page.

shiftless · July 15, 2011, 9:36am

I found the solution. My relative URL to the font file was incorrect. My mistake was making it relative to the root folder of my testing area, where the html files were, and instead it should have been relative to the root folder of my whole web site.

So:

/shared/css/droidsans/DroidSans.eot

becomes

/test/pbworks/shared/css/droidsans/DroidSans.eot

since ‘test’ is a folder in the root of my website. Now IE displays the embedded font.

rpkamp · July 15, 2011, 10:08am

deathshadow60:


@font-face {
	font-family:'MyFontFamily';
	src:url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
	    url('myfont-webfont.woff') format('woff'), 
	    url('myfont-webfont.ttf')  format('truetype'),
	    url('myfont-webfont.svg#svgFontName') format('svg');
}

There’s a slightly newer version, because this one has problems in IE9 compat mode.

Further Hardening of the Bulletproof Syntax | Fontspring

shiftless · July 15, 2011, 4:29pm

I found this too, thanks for the help everyone. Example of the code I ended up with here. I’ll have to change it when I move it off the testing area to the real domain:

@font-face {
	font-family: 'DroidSans';
	src: url('test/pbworks/shared/css/droidsans/DroidSans.eot');
	src: url('/test/pbworks/shared/css/droidsans/DroidSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('/test/pbworks/shared/css/droidsans/DroidSans.woff') format('woff'), /* Modern Browsers */
	     url('/test/pbworks/shared/css/droidsans/DroidSans.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('/test/pbworks/shared/css/droidsans/DroidSans.svg#svgFontName') format('svg'); /* Legacy iOS */
	src: local('Droid Sans Regular'), local('DroidSans'), url(/test/pbworks/shared/css/droidsans/DroidSans.ttf) format('truetype');
}


@font-face {
	font-family: 'DroidSans';
	font-weight: bold;
	src: url('/test/pbworks/shared/css/droidsans/DroidSans-Bold.eot');
	src: url('/test/pbworks/shared/css/droidsans/DroidSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('/test/pbworks/shared/css/droidsans/DroidSans-Bold.woff') format('woff'), /* Modern Browsers */
	     url('/test/pbworks/shared/css/droidsans/DroidSans-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('/test/pbworks/shared/css/droidsans/DroidSans-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
	src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(/test/pbworks/shared/css/droidsans/DroidSans-Bold.ttf) format('truetype');
}

rpkamp · July 15, 2011, 4:33pm

Can’t you use relative paths in the CSS? For example, if the CSS files are in the css folder:


@font-face {
	font-family: 'DroidSans';
	src: url('./droidsans/DroidSans.eot'); /* IE9 compat mode */
	src: url('./droidsans/DroidSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('./droidsans/DroidSans.woff') format('woff'), /* Modern Browsers */
	     url('./droidsans/DroidSans.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('./droidsans/DroidSans.svg#svgFontName') format('svg'); /* Legacy iOS */
}


@font-face {
	font-family: 'DroidSans';
	font-weight: bold;
	src: url('./droidsans/DroidSans-Bold.eot'); /* IE9 compat mode */
	src: url('./droidsans/DroidSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('./droidsans/DroidSans-Bold.woff') format('woff'), /* Modern Browsers */
	     url('./droidsans/DroidSans-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('./droidsans/DroidSans-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

I’ve dropped the last line of both; you don’t need those.

system · July 15, 2011, 7:20pm

Really if you have to absolute path them or up-tree link them (as per Scallio’s last example) IMHO there is something flawed with your directory structure. HTML > CSS > stuff called by CSS… Down-tree for the win.

shiftless · July 15, 2011, 7:22pm

Changing the paths to your example:

./droidsans/DroidSans.eot

breaks the font embedding for IE, but not Firefox. I read somewhere that the path was related to the root of the domain, even though I am just working inside a buried test folder on my site. I’ll try and find the reference.

and just fyi the directory structure is:

system · July 15, 2011, 7:24pm

Oh, I think scallio’s last example meant to do …/ and not ./

Since you seem to have them in an entirely different branch of the tree. Oh wait, no… you have them in the same branch? What the… then why all the screwing around with subdirectories?!?

Wait, the CSS is in a SEPARATE FILE as
http://www.aftermath-creative.com/test/pbworks/shared/css/droidsans/droidsans.css

Gah, not only a extra handshake for NOTHING, if the CSS is in the same directory you don’t even NEED paths…


@font-face {
    font-family: 'DroidSans';
    src: url('DroidSans.eot'); /* IE9 compat mode */
    src: url('DroidSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('DroidSans.woff') format('woff'), /* Modern Browsers */
         url('DroidSans.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('DroidSans.svg#svgFontName') format('svg'); /* Legacy iOS */
}
 
 
@font-face {
    font-family: 'DroidSans';
    font-weight: bold;
    src: url('DroidSans-Bold.eot'); /* IE9 compat mode */
    src: url('DroidSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('DroidSans-Bold.woff') format('woff'), /* Modern Browsers */
         url('DroidSans-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('DroidSans-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Should work just fine. CSS paths are relative to the path of the CSS file itself. Since it’s in the same DIRECTORY…

Of course you’ve got three separate CSS files in two directories with NO media types… talk about over-complicating the page… but then you’ve also got that IE conditional comment nonsense for nothing too, alongside “classes on everything” for no good reason, that clearfix bull like it’s still 2003… and of course the layout breaking from the use of dynamic fonts inside px metric containers…

shiftless · July 15, 2011, 7:35pm

OK, the source I had read about the path being related the root of the entire web site it sat on was wrong (whew!, so glad for that). I changed it to this, since the fonts and the embedded font css file are in the same directory, and it seems to work:

@font-face {
	font-family: 'DroidSans';
	src: url('DroidSans.eot');
	src: url('DroidSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('DroidSans.woff') format('woff'), /* Modern Browsers */
	     url('DroidSans.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('DroidSans.svg#svgFontName') format('svg'); /* Legacy iOS */
	src: local('Droid Sans Regular'), local('DroidSans'), url(DroidSans.ttf) format('truetype');
}

@font-face {
	font-family: 'DroidSans';
	font-weight: bold;
	src: url('DroidSans-Bold.eot');
	src: url('DroidSans-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	     url('DroidSans-Bold.woff') format('woff'), /* Modern Browsers */
	     url('DroidSans-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	     url('DroidSans-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
	src: local('Droid Sans Bold'), local('DroidSans-Bold'), url(DroidSans-Bold.ttf) format('truetype');
}

system · July 15, 2011, 8:06pm

It’s one of the little details that can really mess you up early on. Things called by the HTML? Based on the location of the HTML file. things called by Javascript? Based on the location of the HTML file running the Javascript… Objects/Applets/Embeds trying to call files? Based on the location of the HTML file loading them.

But CSS? Based on the location of the CSS file.

It’s the odd man out, but that can actually be quite handy as if you put all the stuff that’s “presentational” under the CSS in it’s own directory, it makes having multiple skins for the same markup easier.

Hence the difference between content images and presentational images. Content would be images that are the same regardless of the skin – presentational would have to be customized for the skin.

Since that’s one of the other reasons to use CSS; multiple appearances off one HTML.