Error: Unsupported OpenType signature <!DO

[kaldrenon]

Error: Unsupported OpenType signature <!DO
    at parseBuffer (opentype.js?6770:204)
    at eval (opentype.js?6770:378)
    at XMLHttpRequest.request.onload (opentype.js?6770:71)

Expected Behavior

Font loaded from file.

Current Behavior

Loading a font using https://github.com/shrhdk/text-to-svg and seeing this error from OpenType.js -- very unfamiliar with font formats so not able to infer much from the error message except that perhaps the font file is formatted in a non-standard way? Only relevant search result in Google was #278 but the error message is a little different.

Font fails to load.

Possible Solution

I recognize that it's possibly the font file that's causing this issue but wanted to request input here in case this is an issue anyone recognizes.

Steps to Reproduce (for bugs)

Not sure I can provide this, the font in question is proprietary and licensed.

Your Environment

• Version used: 0.7.3
• Font used: Avenir
• Browser Name and version: Chrome 69
• Operating System and version (desktop or mobile): OSX High Sierra
• Link to your project: not public

[Jolg42]

Hi!

The <!DO reminds me of the DOCTYPE declaration for HTML files, could you make sure your font file is either in the OpenType .otf or TrueType .ttf format?

[kaldrenon]

Thanks @Jolg42 -- I found my problem, and it was actually a routing issue on the assets in my project, so OpenType was trying to load my site's 404 page as a font. That <!DO was in fact the top of that page's markup. Whoops!

Closing issue. Thanks.

[CubeOfCheese]

Hello, I am getting the same error, but I am definitely not loading an html page instead of an otf font, so I do not think the <!DO is the first part of the file being loaded. I am working in React with p5.js using p5-react-wrapper. The below text appears in my page, I believe this is an attribute of p5 when a javascript error occurs.

[Jolg42]

@CubeOfCheese What's happening is actually the same ie:

"<!DO" is for "DOCTYPE" the first tag in an HTML file, this mean that you're trying to open an HTML file. I guess it's a 404 page or something like this ;)

Check the path to your .otf file and try again. I also suggest opening the Console at the Network tab to see what's happening.

[CubeOfCheese]

Okay thank you, I see in the network tab that it is returning the index.html page for React, but I do not understand why.

[Jolg42]

Usually the best is to have assets in something like a public folder.

Maybe this could help https://facebook.github.io/create-react-app/docs/using-the-public-folder

[CubeOfCheese]

Moving the font file into the public folder and changing the filepath to point there still did not work. I am still receiving index.html as the response.

[Jolg42]

Not sure about that, but you could try to call the font with something like this: "%PUBLIC_URL%/yourfont.otf" (found this here https://medium.com/@jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b)

[katOstrynska]

Hello, I've got the same problem; I am using VueJS (version 3.11.0) and request font on click event.

const opentype = require('opentype.js'); opentype.load('@/assets/fonts/Inconsolata/Inconsolata-Regular.ttf', function(err, font) { if (err) { console.log('error with font') console.log(err) } else { console.log('success!') } })

My network tab: I am sure that I have js enabled in my browser.

[peilingjiang]

The thread has been silent for a long time but I just want to drop a word here in case anyone else get this problem in the future. I worked with p5 and React and got this problem. I was able to resolve it by import the file into the code and load it from there:

import Roboto from './font/Roboto-Black.ttf'

// ...

p.setup = () => {
  p.loadFont(Roboto, font => {
    console.log('Success!')
  })
}

[simonjanousekk]

Hi, I've been trying to solve this error but nothing from here works.

I have posted new issue with description of my problem. If you possibly know the solution or looking for one, please, visit:

https://github.com/opentypejs/opentype.js/issues/462

THANKSSS!!!

[mnearents]

I am also getting this error except instead fo <!DO it says "Unsupported OpenType signature wOF2". The interesting thing is the font works fine when I'm running a local web server. But when I try to load the font via URL, I get this error. The font file is .ttf.