Choosing a specific style of a font in CSS when developing locally

Question

As I'm building locally, I don't need to worry about webfonts. In order to update the live site all I need to do is upload my amended stylesheet to the server.

I have the font Trade Gothic LT Std installed on my computer, and have styled some elements like so:

.element {
    font-family: Trade Gothic LT Std;
}

However I need to style some elements as Trade Gothic LT Std Bold Condensed No. 20. I've tried specifying this like so:

h1, h2, h3, h4, h5, h6 {
    font-family: "Trade Gothic LT Std Bold Condensed No. 20";
}

But with no luck. So I've also tried something like so:

h1, h2, h3, h4, h5, h6 {
    font-family: "Trade Gothic LT Std";
    font-weight: bold;
    font-style: "Bold Condensed No. 20";
}

But then all I get is the standard Trade Gothic LT Std font.

Can anyone see what I'm doing wrong? Here is the font info if that helps

PostScript name TradeGothicLTStd-BdCn20

Full name Trade Gothic LT Std Bold Condensed No. 20

Family Trade Gothic LT Std

Style Bold Condensed No. 20

Answer 1

You have to include the source of the file if it is not system installed font something like this.

@font-face {
font-family: fontname;
src: url(localfonturl);
}

Then use the name 'fontname' where ever you want.

div {
font-family: fontname;
}

Try .ttf type font file since it will support in all major browsers.