Hello,

 

I'm have the most difficulties in embedding custom fonts in IE8+ on my site.

 

I've used many forms of the @font-face and none of them work. None!

 

Here is what I've tried:

 

@font-face {

font-family: 'Deft';

src: url('deftone.eot?') format('eot'), url('deftone.woff') format('woff'), url('deftone.ttf') format('truetype');

}

also:

@font-face {

font-family: 'Deft';

src: url('fonts/Deft/deftone.eot');

src: url('fonts/Deft/deftone.eot?#iefix') format('embedded-opentype'),

url('fonts/Deft/deftone.woff') format('woff'),

url('fonts/Deft/deftone.ttf') format('truetype'),

url('fonts/Deft/deftone.svg#DeftoneStylusRegular') format('svg');

font-weight: normal;

font-style: normal;

}

also the above but without the font styling. I've tried changing the location of the fonts so they're at the same root level as my css file. *thumping head*

Both variations above work in every browser but IE8/6 (the only 2 versions I can actually test it on). I know V6 doesn't really matter, I just have a machine with one on it. I'm more concerned with IE8+.

Can anyone shed any light as a sure fire way to embed fonts for total cross browser compatibility?

Cheers

Jay

 

have you tried http://www.fontsquirrel.com/tools/webfont-generator ?

For IE8 you should be able to use :

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

This might be a case of downloading of fonts disabled in IE's security settings or a problem with your path (although that should mean that they aren't visible in other browsers either.)

 

Make sure you test the other browsers on the same machine you are using to test IE8. You may have them in your system fonts on another machine which would mean they would display correctly even if the path was wrong.

have you tried http://www.fontsquirrel.com/tools/webfont-generator ?

 

I have indeed. It was the second thing I tried. The third attempt was Paul Irish's so called 'Bullet Proof' way which didn't work, so not 100% bullet proof after all! Chris Coiyer's way (posted above by Mantis) doesn't work either and these two guys are CSS guru's so I must be doing something really wrong!

 

For IE8 you should be able to use :

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

This might be a case of downloading of fonts disabled in IE's security settings or a problem with your path (although that should mean that they aren't visible in other browsers either.)

 

Make sure you test the other browsers on the same machine you are using to test IE8. You may have them in your system fonts on another machine which would mean they would display correctly even if the path was wrong.

 

I've tested it in IE8 on two different machines and both have the same issue. Neither system have the fonts installed. It's becoming aggravating at best! I tested Chrome/FF/Safari on both machines and the fonts display perfectly. WTF!!!!????? (can you hear the desperation in that 'WTF'??? haha)

are you previewing locally or with a live site?

Do you have a link to the remote? I always use the above and haven't had problems but I also haven't had to support IE8 in a while. My guess is that it has something to do with the security settings as I've heard of that as a problem. Can you look into the settings in your IE8?

 

Did you test in IE9? There might be something wrong with your .eot file.

are you previewing locally or with a live site?

 

I was testing locally (MAMP) on Chrome and live on IE. I thought IE8 was pretty much unused nowadays but my girlfriends office (about 500 people) use IE8 - shocking!

Do you have a link to the remote? I always use the above and haven't had problems but I also haven't had to support IE8 in a while. My guess is that it has something to do with the security settings as I've heard of that as a problem. Can you look into the settings in your IE8?

 

Did you test in IE9? There might be something wrong with your .eot file.

 

I haven't got a machine with IE9 on it so I couldn't test it. a link to the remote?

I haven't got a machine with IE9 on it so I couldn't test it. a link to the remote?

In that case I am going to guess that there is a problem with your .eot file in which case it wont work in IE9 either. It would be easier if you could put it on a remote server (testing server) so we could have a look.

 

Usually offices are the culprits when it comes to old browser versions. Companies don't want to update their version of Windows because it is too costly and they don't care whether their employees are having a great internet experience or not. Windows XP doesn't allow browser upgrades either which only reinforces the problem. Personally I wouldn't worry if IE8 users were getting the most beautiful font as long as they can read it. They are probably used to things not looking their best as IE8 support is dropped more and more frequently. This is also why you should always use a font stack so system fonts can pick up the slack if the chosen font isn't available.

Jaythomas,

 

I can't help with the webfont issue per say... I generally use google fonts as my goto for online "fontage" ( is that a word? LOL )

 

But this is something that might help for IE testing: https://www.virtualbox.org/

I run it here and it's fantastic.

 

You can then download the "Virtual machines" direct from microsoft here: http://modern.ie/en-us/virtualization-tools#downloads

(In the first drop down select windows ... second dropdown select virtualbox)

 

It might help you test for other IE versions.