{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Fickle 薄情 的问题《Why won't this TTF font work in my browser?》','https://www.manongdao.com/q-904842.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
Try this
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.
Check your paths, Best practices is to always use a relative paths (Ex:)
Check header:
Access-Control-Allow-OriginGo to:
http://yourwebsite/clunk.ttfIf that can not download (as the first error states), then your file location is not correct. You might have to set an absolute path like:
http://yourwebsite/somesubpath/clunk.ttfOr
/somesubpath/clunk.ttfThis may help you.
https://everythingfonts.com/ttf-to-woff
Basically what you need to do is:
-Convert the .ttf to .woff
I don't know why converting it works. But it always work for me. Also… delete your cache or change the name of the file.
I hope this helps