Custom font on canvas only working for safari

Question

I'm currently building a canvas game in JavaScript and jQuery. For the statusbar I wanted to use a custom font, named "pixelart.ttf". In index.html I added the following:

<style type="text/css">
    @font-face {
        font-family: pixelart;
        src: url(misc/pixelart.ttf);
    }
</style>

It is before all scripts are loaded. The canvas is also on this page.

This is the code that should draw the statusbar with the font:

context.fillStyle = 'rgba(25, 25, 25, 0.1)';
context.textBaseline = 'top';
context.font = fontSize + ' ' + fontName; // will become '25px pixelart'
context.fillText(currentText, 50, 50);

In Safari on both Mac and iPhone the font works, on all other browsers it does not. When I look at the loaded resources in Chrome or Firefox the font is there, but it shows another default font.

I tried some things. For example adding this at the top of the body:

<div style"font-family: pixelart"></div>

But this also doesn't work.

Any suggestions?

Answer 1

In addition to .ttf you need to have your font in .eot .woff2 .woff to make it work.

css example:

@font-face {
    font-family: 'yourFONT';
    src: url(/yourFont.eot');
    src: url('/yourFont.eot?#iefix') format('embedded-opentype'),
         url('/yourFont.woff2') format('woff2'),
         url('/yourFont.woff') format('woff'),
         url('/yourFont.ttf') format('truetype'),
         url('/yourFont.svg#yourFONT') format('svg');
    font-weight: normal;
    font-style: normal;
}