Need some CSS help!

[NBHNC]

Been racking my brain for a few days with this issue and I have no clue what the fuck is going on.

Here's what I have

@font-face {
	font-family:"Agency-FB";
	src:url("../fonts/AgencyFB.TTF") format("truetype");
	src:local("Agency FB"), url('../fonts/AgencyFB.TTF') format("truetype");
}

.navigation {
	width:459px;
	float:left;
	font-family:"Agency-FB";
	font-size:25px;
	color:#fff;
	text-align:right;
	padding:10px 0;
}

It seems to work fine on Firefox and Chrome, but when I load up Internet Explorer, it uses some other default font.

So, I decided to use this-

<!--[if IE]>
    <link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->

ie.css with Google fonts (similar looking font) since it worked in testing-

@font-face {
  font-family: 'Voltaire';
  font-style: normal;
  font-weight: 400;
  src: local('Voltaire'), url('http://themes.googleusercontent.com/static/fonts/voltaire/v3/ag0Q3_6hjQFerbCN2Eewq_esZW2xOQ-xsNqO47m55DA.woff') format('woff');
}

.navigation {
	width:459px;
	float:left;
	font-family:"Voltaire";
	font-size:25px;
	color:#fff;
	text-align:right;
	padding:10px 0;
}

Now, this seems to work on one computer with IE9, but another with IE8, it still uses that default fucking font that I cant seem to change.





Do any of you have a clue on what is going on here? Is IE8 just that much of a pain in the asshole?

[potter]

IE8 only accepts .eot font files. To be truly cross browser compatible you need this declaration of files.

@font-face {
    font-family: 'SansLight';
    src: url('OpenSans-Light-webfont.eot');
    src: url('OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Light-webfont.woff') format('woff'),
         url('OpenSans-Light-webfont.ttf') format('truetype'),
         url('OpenSans-Light-webfont.svg#CabinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

[NBHNC]

That doesn't seem to be working.

Also tried using

<!--[if lt IE 8]>
	<link rel="stylesheet" type="text/css" href="ie8.css" />
<![endif]-->

but that doesn't seem to be working either.

[NBHNC]

Bump before I drive myself any crazier trying to figure this out.

[moeloubani]

check the path to your font files is right if youre doing the eot thing right

[barcodes]

here is what I use on my site and it works on everything.
I took out the unnecessary stuff from the body tag.

@font-face {
    font-family: 'NewsCycleRegular';
    src: url('NewsCycle-Regular-webfont.eot');
    src: url('NewsCycle-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('NewsCycle-Regular-webfont.woff') format('woff'),
url('NewsCycle-Regular-webfont.ttf') format('truetype'),
url('NewsCycle-Regular-webfont.svg#NewsCycleRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
	font: 14px/16px 'NewsCycleRegular', Arial, sans-serif;
	letter-spacing:0.8px;
}

You can go here and generate a font face kit with your own font http://www.fontsquirrel.com/fontface/generator.
You will get a css file i think and the web versions of the fonts.
They also have premade ones here http://www.fontsquirrel.com/fontface.

Best of luck

[NBHNC]

check the path to your font files is right if youre doing the eot thing right

It's definitely there.

[harvey]

Been racking my brain for a few days with this issue and I have no clue what the fuck is going on.

Here's what I have

@font-face {
	font-family:"Agency-FB";
	src:url("../fonts/AgencyFB.TTF") format("truetype");
	src:local("Agency FB"), url('../fonts/AgencyFB.TTF') format("truetype");
}

.navigation {
	width:459px;
	float:left;
	font-family:"Agency-FB";
	font-size:25px;
	color:#fff;
	text-align:right;
	padding:10px 0;
}

It seems to work fine on Firefox and Chrome, but when I load up Internet Explorer, it uses some other default font.

So, I decided to use this-

<!--[if IE]>
    <link href="css/ie.css" rel="stylesheet" type="text/css">
<![endif]-->

ie.css with Google fonts (similar looking font) since it worked in testing-

@font-face {
  font-family: 'Voltaire';
  font-style: normal;
  font-weight: 400;
  src: local('Voltaire'), url('http://themes.googleusercontent.com/static/fonts/voltaire/v3/ag0Q3_6hjQFerbCN2Eewq_esZW2xOQ-xsNqO47m55DA.woff') format('woff');
}

.navigation {
	width:459px;
	float:left;
	font-family:"Voltaire";
	font-size:25px;
	color:#fff;
	text-align:right;
	padding:10px 0;
}

Now, this seems to work on one computer with IE9, but another with IE8, it still uses that default fucking font that I cant seem to change.





Do any of you have a clue on what is going on here? Is IE8 just that much of a pain in the asshole?

IE is a nightmare, not matter what build. Anyway, I think the issue is you NEED to define whether you use serif, sans-serif, cursive or whatever your font is. Also, IE8 and older likes to have every element redundantly defined, so many times styling the body won't work, but you'll need to style h1, h2, p, whatever

[livexxx]

If you want to change how you or your engineers deal with CSS then you should also be looking longer term at something like http://compass-style.org/
Might take a sprint to fully get to grips with it, but great for velocity in future sprints