OTF font does not work, but ttf does

Question

I have a problem with setting a font with a css.

Currently I have:

@font-face {
    font-family: 'myfont';
    font-weight: bold;
    src: url('_layouts/Fonts/myfont.otf') format("opentype");
}

And it does not apply my font to style, but if i change that to:

@font-face {
    font-family: 'myfont';
    font-weight: bold;
    src: url('_layouts/Fonts/testfont.ttf') format("opentype");
}

(even if I left opentype as format), it does work.

Of course in a style i have added:

font-family: 'myfont';

Does anybody know this problem?

Answer 1

you need four versions of the same font (eot, ttf, otf and woff) loading for crossbrowsing optimization. you probably don't see the .otf one because your browser doesn't support it (that's why you need 4).

i suggest you use google fonts, it's easy, quick and it just works: https://www.google.com/fonts