What is wrong with my helvetica font-face?

HTML & CSS
1

I am trying to font-face helvetica neue in regular, thin, medium and bold like this:

@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-bd.eot'); /* IE9 Compat Modes */
	src: url('../fonts/HelveticaNeueLTCom-Th.ttf') format('truetype');
	src: url('../fonts/HelveticaNeueLTCom-Roman.ttf') format('truetype');
	src: url('../fonts/HelveticaNeueLTCom-Md.ttf') format('truetype');
	src: url('../fonts/HelveticaNeueLTCom-Bd.ttf') format('truetype');
	}

But it is not working, the page just takes the last one (in this case Bd(bold) ) and applies it to all places with font-family: “helvetica neue”;

How should this be done?

2

You need to do it in separate font-face rules. See the solution here under the heading Right Solution.

3

Okey thanks, so this would be correct?:

@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Roman.ttf');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Roman.ttf');
	font-weight: normal;
	font-style: italic;
}
@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Md.ttf');
	font-weight: 500;
	font-style: normal;
}
@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Md.ttf');
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Bd.ttf');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Bd.ttf');
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Th.ttf');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'helvetica neue';
	src: url('../fonts/HelveticaNeueLTCom-Th.ttf');
	font-weight: 300;
	font-style: italic;
}
4

Yes that seems to be what they are saying?

Try it and see :slight_smile:

5