Search code examples
htmlcssfontsfont-face

What's wrong on declaring this .otf font?

This is my declaration code:

@font-face {
    font-family: 'MyOwnFont';
    font-style: normal;
    font-weight: 400;
    src: url('../webfonts/MyOwnFont.otf') format("opentype");
}

but when I use it:

body
{
    font-family:'MyOwnFont';
}

I can't see it in the webpage. What's wrong with the declaration?

Solution

  • It's usually best to run the font through a web-font generator, such as http://www.fontsquirrel.com/tools/webfont-generator

    This way, it will generate an otf, ttf etc version of the font, which will be supported far better, than just a reference to an otf font.

    @font-face{ 
    font-family: 'MyWebFont'; 
    src: url('WebFont.eot'); 
    src: url('WebFont.eot?#iefix') format('embedded-opentype'), 
        url('WebFont.woff') format('woff'), 
        url('WebFont.ttf') format('truetype'), 
        url('WebFont.svg#webfont') format('svg'); 
}