Chrome Failed to decode downloaded font OTS parsing error: post: Failed to parse table

user_1270514 0
Viewed 8764

I have a problem when using yojo.ttf font. Here is my simple html code

<html>
<head>
    <style>
        @font-face {
            font-family: 'yojo';
            src: url('./yojo.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
    </style>
</head>
<body>
    <p style="font-family: 'yojo'">ありがとう</p>
</body>
</html>

yojo.ttf

This font works well on Safari, but it doesn't work on chrome and firefox: the font of the text in the paragraph is not yojo font family, and the console just show a warning message:

Failed to decode downloaded font OTS parsing error: post: Failed to parse table

Is there any way to fix the problem without modifying the font file? Thanks!

google-chrome fonts
1 Answers

I know this is a bit old, and you probably already figured it out, but just in case you didn't or someone has the same issue...

Had the same problem, and basically it seems Chrome and other browsers can't read the .ttf font format. Here's how I fixed it:

Convert your .ttf file into other font formats like .eot and .woff formats.

You can do that by going to this site...

https://transfonter.org/

Upload your font, then select all the formats you need (I selected everything), and I think you can leave everything else at the default setting.

transfonter screen

Then hit the download button. You'll get a compressed file with all the font file formats and a css stylesheet that gives you an example of how your @font-face declaration should look like. You can copy this to your css file, or just make your own declaration. Of course you should also place the font files where you want your site to access them from.

And now it should work for Chrome, Safari, and Firefox. Not sure about other browsers though!

I hope that helps you or someone.

user_101954820
Related