Failed to decode downloaded font

[swampthang 112 Likes (Specialist)]

Wondering if anyone has seen this warning. I don't have a codepen because I haven't figured out a way to replicate the process I'm using. I'm loading local fonts using fontkit and setting them up to be used in GSAP text animations. I don't think this is a GSAP bug, I think it's a Chrome (Chromium) bug - but, they all reference line 150 from CSSPlugin.js.

 

It's not preventing the font from being loaded, it just doesn't show up correctly - looks like whatever the fallback font is.

 

Here's what I'm seeing...

 

Failed to decode downloaded font: file:///Library/Fonts/AppleMyungjo.ttf

OTS parsing error: OS/2: missing required table



Failed to decode downloaded font: file:///Library/Fonts/Yu%20Gothic%20Bold.otf
OTS parsing error: CFF: Failed validating charstring set 0


Failed to decode downloaded font: file:///Library/Fonts/Yu%20Gothic%20Medium.otf
OTS parsing error: CFF: Failed validating charstring set 0


Failed to decode downloaded font: file:///Library/Fonts/YuppySC-Regular.otf
OTS parsing error: bad range shift


Failed to decode downloaded font: file:///Library/Fonts/YuppyTC-Regular.otf
OTS parsing error: bad range shift

Here's a screenshot from inspector...

All I really want to do is figure out a way to catch these warnings and filter out the fonts that might be problematic. Fonts are being pulling from local font folders. I've been able to filter out all other invalid or otherwise unworkable fonts.

 

Any thoughts?

 

 

[swampthang 112 Likes (Specialist)]

In fact, every time I process a timeline, I get the parsing error warnings referencing line 150 of CSSPlugin.js. Fonts including in the warnings are unrelated to any of the tweens in the timeline.

[Jonathan 5,176 Likes (Superhero)]

Hello swampthang

 

Can you please create a limited codepen dmeo example so we can see this error i a live environment?

 

Have you tried only running your code inside a DOMContentloaded and a window load event to make sure your code doesnt run until the DOM is ready and teh window is loaded with all external styles, external scripts, fonts, and images.

 

Maybe also trying to check if they are loaded using a try and catch, before running your code?

 

Also what about using bulletproof @fontface so you include various fonts for each browser..

 

I think webkit prefers WOFF or WOFF2 font format.

 

fontsquirrel has a great fontface generator for bulletproof @fontface

 

http://www.fontsquirrel.com/fontface/generator

 

Browser support for WOFF and WOFF2

 

http://caniuse.com/#feat=woff

 

Thanks!

[swampthang 112 Likes (Specialist)]

Thanks for the input, Jonathan. Following is an explanation of why I couldn't replicate this in a codepen.

 

I finally found out what was causing those pesky errors. In case someone else runs into this problem I'm posting the resolution.

 

This is an Electron app which uses the Chromium browser. Electron allows you to create desktop applications using HTML, CSS and Javascript and you can use anything from the npm library just about.

 

Loading all the system fonts on a user's computer was just a matter of snagging all the font files in the various fonts folders but I was (wrongly) under the impression that I had to create a css file with @font-face rules in the electron app for all the local fonts. I found out that all I have to do is know the font-family for the font and it would style the fonts directly from the system. Having the css file with a bunch of @font-face definitions and font-family declarations was not only confusing the system, it was really slowing down the loading of the app.

 

I completely removed the css file and everything is styling correctly and the errors/warnings are gone!

 

Just in case you are curious, snagging local system fonts can be done with several libraries but here is one that only uses javascript. The creator of this library is actively working on it and very knowledgable about fonts. He's the one who enlightened me regarding not having to create the css file for system fonts.

 

https://github.com/rBurgett/system-font-families