2

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!

ilasno
  • 714
  • 1
  • 13
  • 31

2 Answers2

1

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:

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

Community
  • 1
  • 1
Community
  • 4,922
  • 7
  • 25
  • 37
  • I'm pretty sure that this isn't a cross-domain issue; the fact that IE chokes on the direct link to the font file supports this. From Firefox and Chrome, both the .eot and .woff versions of the font download ok, as well as the editor toolbar displaying correctly. I tried clearing IE's cache as well as its SSL state, but no dice. :( Really appreciate your time and your thoughts! – ilasno May 13 '14 at 16:08
  • @ilasno _"I'm pretty sure that this isn't a cross-domain issue;"_ In order to better help you troubleshooting this, could you please respond **Yes** or **No** to the following: is the .eot file served from a the exact same domain and protocol than the web page itself? Thanks, looking forward to your reply. – Community May 13 '14 at 16:18
  • Yes. In the description, i also describe IE unable to download the font file when i access it *directly* with a URL like so: https://mysite.com/assets/tinymce/skins/lightgray/fonts/tinymce.eot (which is the same protocol and domain as my site). Thanks for your time, much appreciated! – ilasno May 15 '14 at 15:08
  • @ilasno Possible fix by changing the response header, check this answer: http://stackoverflow.com/questions/7748140/font-face-eot-not-loading-over-https – Community May 15 '14 at 15:17
  • Thank you, appreciate your time! – ilasno May 20 '14 at 20:05
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

Siva
  • 26
  • 1