Search code examples
cssfontsfont-face

Why does the CSS @font-face rule only seem to work with some fonts?

I went to the following site to check out some sweet custom fonts:

http://www.fontspace.com/category/ninja

If I try to use the "Last Ninja" font using the following CSS, it doesn't work (the font just looks like Times New Roman in my browser):

@font-face {
  font-family: LastNinja;
  src: url("/lastninja.ttf") format("truetype");
}

h1 {
  font-family: LastNinja;
}

But if I use the same code for the "Japonesa" font, it works:

@font-face {
  font-family: Japonesa;
  src: url("/japonesa.ttf") format("truetype");
}

h1 {
  font-family: Japonesa;
}

I've tried this on both Chrome and Firefox. Any idea what's going on?

Solution

  • I've tried it and had same issue. The font seems corrupt or non-standard, even http://www.fontsquirrel.com rejects to convert the font.

    Edit: CodeAndMore service is able to convert this font (it converts to svg format only). Preview, Download

    Edit 2: Solution
    Convert the font from .ttf to .ttf with any font converter and use converted .ttf instead. This worked for me, tested in Chrome.