TinyMCE toolbar display on IE8 over https

Question

We have an application that needs to support IE8 (unfortunately); here are some specs:

• Ruby 1.8.7
• Rails 3.1.11
• tinymce-rails gem, v4.0.12

When tinymce loads, the font that is needed to display the toolbar icons fails to load in IE8. It just shows the boxes that indicate that the font is not loaded.

If enter the URL directly to the font file (.woff or .eot), somthing like:

https://mysite.com/assets/tinymce/skins/lightgray/fonts/tinymce.eot

IE shows the download dialog box with "0% of tinymce.eot..." and then an alert box that says

"Internet Explorer cannot download tinymce.eot from mysite.com. Internet Explorer was not able to open this Internet site. The requested site is either unavailable or cannot be found. Please try again later."

The odd thing is that we first encountered this on our QA server, and we concluded that the issue was that the secure certificate there was self-signed so IE would not download the font. When we first pushed this app to production (with a valid certificate), i swear i saw these icons showing properly and therefore assumed that the font was loading ok. But sometime in the last week (without a change that i know of to the app or the infrastructure), the icons/font are no longer loading.

I have been searching and digging (on this site and on the interwebs) and not been able to nail down a helpful troubleshooting step or fix. Any help or guidance would be much appreciated!

Answer 1

IE8 does not allow you to download any content from a secure SSL site. It is considering your tinymce.eot as a downloadable file and not letting you download via the browser.

Deleting below headers will allow the files to be downloaded. This can be done on your proxy or web server.

Cache-Control, Expires, Pragma

For Apache HTTP Server

Header unset Cache-Control
Header unset Pragma Header unset Expires

Answer 2

This could be a problem caused by a cross-domain policy bug in IE 8-11. The font files would not load in IE because they are served from a different domain than the one serving the page where TinyMCE is embedded.

If this is the problem you encounter, it could be solved by either serving the font file via the same domain as the one serving the web page, or either add the correct headers allowing cross-origin font loading.

Here are some links that might help:

• FontAwesome does not load on Windows 8.1 on IE11
• Fontawesome Icons not working on IE9 and Chrome
• Amazon S3 CORS (Cross-Origin Resource Sharing) and Firefox cross-domain font loading
• http://dev.w3.org/csswg/css-fonts/#same-origin-restriction

Now if this is not the problem (it's hard to tell without a link to your site), then perhaps try to download the tinymce.eot file from another browser and see if you still receive any error. Maybe the file is corrupted? Maybe wrong headers are being sent? If not done yet, you could try to clear the cache in IE (Control+Shift+Delete).

---

If all this still doesn't help solving the issue, try adding the following in an .htaccess file:

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

See more information here where alternative solutions can be found: @font-face EOT not loading over HTTPS