css code for a custom font

Question

Hello I have a CSS containing

@font-face {
    font-family: pixelated;
src: url('jd_lcd_rounded.ttf') format('truetype');
    font-weight:40;
}

/*classes*/
.sign {
font-family: pixelated;
font-size: 24px;
font-weight: strong;
color:#FF8C00;
background-color:#111111;
border:5px solid;
border-color:black;
}

The font file was extracted from a download from http://www.jeckodevelopment.com/en/fonts/jd-lcd-rounded and when extracted, opened and "installed" shows up fine in Microsoft office...

CSS and web page code work when using default fonts... using XAMPP in Win7

Any advice on what I'm still missing?

Answer 1

You'll need a whole set to make them work across browsers, for example:

@font-face {
    font-family: 'SourceSansPro';
    src: url('/assets/fonts/SourceSansPro-Bold.eot');
    src: url('/assets/fonts/SourceSansPro-Bold') format('embedded-opentype'),
         url('/assets/fonts/SourceSansPro-Bold.ttf.woff') format('woff'),
         url('/assets/fonts/SourceSansPro-Bold.ttf') format('truetype'),
         url('/assets/fonts/SourceSansPro-Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}

There are many online font converter services that can build you the other formats.