CSS font-face does not work

Question

I am trying to add a custom font to my website. I have tried lots of things but didn't succeed. Here is my css code:

@font-face
{
    font-family: myFirstFont;
    src: url('ellis.ttf');
}

body
{
    margin: 0;
    padding: 0;
    width: 100%;
    cursor: default;
    font-size: 11px;
    line-height: 1;
    font-family: myFirstFont,arial,san-serif;
    overflow:auto;
    background:#ecf6f7;
}

I know this is not a cross browser case, but I am trying to make work a simple case at first.

Answer 1

apply font like this..

@font-face
{
    font-family: 'ellis';
    src: url('ellis.ttf');
}
.body
{
    font-family: "ellis";
}

Answer 2

Are you sure that the font file is being referenced in the right place? The file ellis.ttf will be referenced from wherever the Stylesheet is.

If you have your HTML page at http://website.com/page.html, but your CSS at http://website.com/css/page.css then it'll look for ellis.ttf at http://website.com/css/ellis.ttf.

Answer 3

on both the font-family declarations add speech marks.

so add to both @font-face and body:

font-family: "myFirstFont";

Or alternatively try this to make sure all code is correct and to make sure its not the code:

http://www.fontsquirrel.com/fontface/generator

It also may sound stupid, but make sure all spellings of fonts and paths are correct.