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?
PaulOB
2
You need to do it in separate font-face rules. See the solution here under the heading Right Solution.
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;
}
PaulOB
4
Yes that seems to be what they are saying?
Try it and see 