Geek Answers Handbook

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 is 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 does not work, and Chrome gives me two errors:

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

The following errors appear in Firefox:

 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 searched for these errors, but this problem seems very wide, and it was hard to find minimal examples. What can cause an error in this simple situation?

0
css fonts css3 font-face webfonts
source share
5 answers

I found this answer from 2009, which suggested rebuilding the font using FontForge. I tried this and it solved the problem, so it seems to be a problem with the font itself, not the code.

In this particular case, the letters of the font were “missing points at the extremes” that FontForge could solve with one click.

0
source share

try it

 src: url('/clunk.ttf');
+1
source share

It might help you.

https://everythingfonts.com/ttf-to-woff

Basically you need to do the following:

-Convert.ttf to.woff

I do not know why this works. But it always works for me. Also ... delete the cache or change the file name.

I hope this helps

+1
source share

Switch to:

http://yourwebsite/clunk.ttf

If this cannot be downloaded (as indicated in the first error), your file location is incorrect. You may need to set the absolute path, for example:

http://yourwebsite/somesubpath/clunk.ttf

Or

/somesubpath/clunk.ttf

0
source share

Check your paths. Best practice is always to use relative paths (Ex :)

  src: url('fonts/clunk.ttf') format('truetype');

Check Header: Access-Control-Allow-Origin

enter image description here

0
source share

More articles:


All Articles