Opening some PDFs on IE/Edge results in CSS3114 @font-face unable to load invalid OpenType font Exception

[skyleguy]

Check this first The project is a wrapper around Mozilla's PDF viewer, so maybe your bug is caused by the base library. Please check this first by answering these three questions:

• Does the bug also happen on https://mozilla.github.io/pdf.js/web/viewer.htm? (If so, please open the issue at Mozilla's bugtracker). Maybe?
• Does the bug also happen on https://pdfviewer.net/simple? NO
• Can you write a reproducer based on this template project? https://github.com/stephanrauh/ngx-extended-pdf-viewer-issues/tree/master/template Problem does not seem to happen in the reproducer

Describe the bug A clear and concise description of what the bug is.

Whenever I try to open most of my documents on my site on IE/Edge I am slapped with this exception:

CSS3114: @font-face unable to load invalid OpenType font.

This only happens in IE/Edge, Chrome and Safari work fine. The weird part is it only happens once my app is deployed. It works fine locally but the second we deploy the application is when we start seeing the issues. Even more weird is if I pull up the document in question in Chrome, download it, and open it in the viewer in IE/Edge it works fine. After going all the way back to version 3.7.2 (as suggested in another issue thread i found) it works as expected in IE/Edge but it doesnt seem like the find API was around in 3.7.2 which is a definite use case.

We would really like to upgrade to this library from ng2-pdf-viewer but cant if we cannot figure out this issue. There doesn't seem to be any issue in our build process that would be causing this.

Have you seen any such issues where it works locally but not after being deployed?

Version info

• Version of ngx-extended-pdf-viewer

4.0.0-alpha.9

Desktop (please complete the following information):

• Browser [basically Internet Explorer, Edge, or any other browser]

Works in Chrome/Safari but not IE version 11.1282.17763.0, or Edge version 44.17763.831.0

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]

works in iPhone X with ios 13.5.1

I did try to make a reproducer but it didnt seem to cause the issue. even building the app and hosting the app using http-server library and hitting it from there didnt cause the issue to happen.

Demo PDF file Many errors happen with specific PDF files only. So please add a PDF file (after checking the copyright of the PDF file first!)

PDF: original.pdf

Here is the errored snapshot (I redacted the url to my site):

Here is what it should look like:

Interestingly enough it worked from https://pdfviewer.net/simple in both IE and edge but when trying to open in Edge with https://mozilla.github.io/pdf.js/web/viewer.htm the browser showed this:

and in IE 11 with https://mozilla.github.io/pdf.js/web/viewer.htm it was just a blank grey screen.

Thanks for any advice!

[stephanrauh]

I don't think it'll help, but just for the sake of completeness: you could update to version 4.0.1 and check if the error is still there.

But I think that sounds like the beginning of a long and difficult journey. So be it!

https://mozilla.github.io/pdf.js/web/viewer.htm is the ES2015 version. You're right, I have to update my bug template. The version for IE and Edge is https://mozilla.github.io/pdf.js/es5/web/viewer.html.

I suspect the problem is caused by a font embedded in your PDF file. I'm not an expert with respect to the details of the PDF file format, so it's just a far shot. Let's try to create a reproducer first.

[stephanrauh]

Did you check if the bug occurs locally with the production build? I.e. ng s --prod?

Another idea: can you copy the deployed directory to a local server and check if the bug is still there? I guess a server like live-server should do the trick.

[skyleguy]

thanks for the speedy reply, last time i tried using ng build --prod i was not seeing the issue, but i will try again. ill also try updating to 4.0.1 and see if that solves anything. Ill also check the file in the ES2015 version as well to see if the issues persist there or not.

Lastly I'll check on copying the deployed server and using live-server to see if the issue happens there as well.

I will note that the part of the screenshot i redacted earlier included a link to the < head > portion of my index.html as if it was looking there for the font-faces and couldnt find them. But like you said it seems odd that it wouldnt look for the fonts within the PDF itself.

[skyleguy]

looks like updating to 4.0.1 did not resolve the issue unfortunately. after opening my pdf using https://mozilla.github.io/pdf.js/es5/web/viewer.html i can confirm that it does work as expected in IE and Edge. Running ng s --prod also shows the pdf correctly. last thing i have left to try is trying to get the deployed folder and using live-server on it. Its been a bit tricky as we deploy our angular webapp through a tomcat server. will update when I have tried that out.

[stephanrauh]

My gut feeling is you've run into something wicket. Brace yourself with patience. I've learned to hate errors that happen in production but nowhere else. I'll do my best to help you, but I'm afraid currently there's little I can do beyond being supportive and generating out-of-the-box-ideas. As to my experience, even that helps often enough, so carry on reporting!

Best regards, Stephan

[skyleguy]

a similar issue happened to us when trying to update to a newer version of ng2-pdf-viewer awhile ago. when trying to supply our own pdf-worker and pdf-min file it would work locally but fail once deployed. Not the same font issue, but a similar issue that made the pdfs unreadable (random Star shapes in place of several characters, no words, weird lines, etc.). Weirdly what solved that issue was just using the library's native functionality to download pdf.js from cloudflare and cache it. Not sure if its a pdf js version but its weird to me that version 3.7.2 of this library works fine and 4.0.1 is having issues.

Do you happen to know what version of pdf.js 3.7.2 was using?

[stephanrauh]

It was version 2.5.207. You can check this at https://unpkg.com/browse/ngx-extended-pdf-viewer@3.7.2/assets/pdf.js.

Strictly speaking, it's a modified version of pdf.js 2.5.207. I've added a lot of bells and whistles. But I'm pretty sure no modification causes the error. The core PDF engine is nothing I'd like to change light-heartedly.

[stephanrauh]

We can include the author of ng2-pdf-viewer in the loop. Maybe he has some ideas, too. How do you like the idea?

[skyleguy]

I have one more thing left to try and then it may be a good idea. This whole time I’ve been using angular to serve the app locally but I’d like to try serving the app from a local Tomcat server first and seeing if the issue happens then. That simulates the prod environment more

[skyleguy]

Still looking into this issue, but just wanted to add another picture explaining the random star shapes i was mentioning before:

This PDF is the same PDF that is used on https://mozilla.github.io/pdf.js/es5/web/viewer.html that opens fine in my edge browser, but not after I import that pdf into my application in the same browser

[stephanrauh]

Which server are you using? Maybe this makes a difference.

[stephanrauh]

https://medium.com/@zikaitoh/css3111-and-css3114-issue-640e7d5e9163

[stephanrauh]

https://stackoverflow.com/questions/15744026/font-face-not-displaying-correctly-in-ie

[stephanrauh]

Maybe it has something to do with the MIME type?

https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/console/error-and-status-codes#css-codes

For websites in a user's trusted security zone, Microsoft Edge doesn't check the MIME type of a style sheet.

[skyleguy]

We are using a Java Spring application with a Tomcat Server. After doing some digging im not finding a web.config file anywhere. Im also not sure it has to do with any permissions on my local machine because the pdfs do open fine in places other than my site. Thanks for those links, ill continue to sift through those to see if i can find any small tid-bit that could help.

out of curiosity i was looking at the response to the viewer.properties call i see when opening a pdf using extended-pdf-viewer and noticed this line:

When does that variable get used to tell me embedded pdf fonts cant be used?

[stephanrauh]

You're right, Tomcat doesn't use the web.config file. As far as I remember, this file configures the IIS (the Microsoft server).

I scanned the pdf.js project for the message "web_font_disabled". It looks like a feature they've forgotten to remove. The only reference I've found that looks sensitive refers the node.js version of pdf.js. The idea being that node.js isn't a browser, so there are no web font available. But my analysis doesn't convince me. It seems I've missed something.

[skyleguy]

I deployed the PDF with the app in the assets folder of my angular app and pulled it from there (as opposed to pulling through a network call like normal) and it still works locally and fails once deployed.

May try to post to stack overflow describing the problem and see if any help can come of that

[skyleguy]

Closing this since no one else has had the same issue and once we moved our webapp to the cloud and stopped serving it through a java app, the problem seems to have gone away.

[stephanrauh]

Strange - but it's good to hear the problem has vanished, even if I don't have a clue what's caused it!

Best regards, Stephan