Search code examples
cssfontsfont-facewebfonts

Why won't this TTF font work in my browser?

I downloaded a TTF font called "Clunk" and I'm trying to apply it to some text.

Here's the code I'm using:

<html>
<head>
<style>
@font-face {
    font-family: clunk;
    src: url('clunk.ttf');
}

h1 {
    font-family: clunk;
}
</style>
</head>
<body>
<h1 id="logo">Test</h1>
</body>
</html>

This doesn't seem to work and Chrome is giving me two errors:

Failed to decode downloaded font: (path to the file)
OTS parsing error: incorrect entrySelector for table directory

In Firefox, these are the errors that appear:

downloadable font: bad search range (font-family: "clunk" style:normal weight:normal stretch:normal src index:0) source: (path to the file)  test.html:4:12

downloadable font: incorrect entrySelector for table directory (font-family: "clunk" style:normal weight:normal stretch:normal src index:0) source: (path to the file)  test.html:4:12

downloadable font: rejected by sanitizer (font-family: "clunk" style:normal weight:normal stretch:normal src index:0) source: (path to the file)

I Googled around for those errors but this problem seems to be very broad and it was hard to find minimal examples. What would be causing the error in this simple situation?

Solution

  • I found this answer from 2009 that suggested rebuilding the font with FontForge. I tried that out and it solved the problem, so it appears to have been a problem with the font itself rather than the code.

    In this particular case, the letters in the font were "missing points at extrema", which FontForge was able to solve with a single click.