Browser is not displaying the correct font

Question

I have this code in my CSS file, but the browser doesn't display the font:

@font-face {
    font-family: 'font';
    src: url("fonts/FS_Metal.ttf");
}

.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'font';
}

Answer 1

this should be crossbrowser

@font-face {
    font-family: 'your_font';
    src: url('../font/your_font.eot');
    src: url('../font/your_font.eot') format('embedded-opentype'),
         url('../font/your_font.woff') format('woff'),
         url('../font/your_font.ttf') format('truetype'),
         url('../font/your_font.svg#your_font') format('svg');
}

.menu_head {font-family:'your_font',serif;}

I am using http://convertfonts.com/ ... it will do all work for you

also check if path to your font files is correct

Answer 2

This is due to src: url("fonts/FS_Metal.ttf"); this line. You need to make sure the relative path is correct. Alternatively you can use an absolute path.

Say your directory structure is as follows:

Directory Structure:

index.html
css/
js/
fonts/

using relative path do the following in your css file:

@font-face {
    font-family: 'font';
    src: url("../fonts/FS_Metal.ttf");
}

using absolute path do this

@font-face {
    font-family: 'font';
    src: url("http://yoursite.com/fonts/FS_Metal.ttf");
}

I would also recommend you to look at Google Webfonts API