1

I have a webapp that uses @font-face to display TinyMCE icons. When running the app locally, these icons appear as intended in IE11. However, when deploying to a cloud server, the icons do not appear in IE11. I have edited my @font-face to take the .eot file out of the equation so that all browsers just grab the .woff. Also, on both local and remote versions of my app, the icons load and appear as intended on Chrome, Safari, and Firefox. I have noticed 2 key things:

  1. On local app (which is over HTTP), IE11 GETs the icon file, tinymce.woff, without an issue. Before I changed this to get the .woff rather than the .eot, the .eot worked fine too. However, on the remote version of the app (which is over HTTPS), IE11 GETs the tinymce.eot, the tinymce.woff, and the tinymce.ttf (in that order) and all have a 200 Response Code. Why is IE11 downloading 3 different versions of the icon file? Is it possible there is some kind of conflict between these three files and that's causing the icons to not display? If so, how do I fix this? Keeping in mind that on the local version of the app, IE11 only GETs one of the icon files (tinymce.woff) which I believe is the behavior I want.

  2. Research has led me to believe that the issue may be with the "Pragma" and "Cache-Control" headers that are being sent back as a response to the app's GET requests for the icon file. However, I am having trouble figuring out how to remove these headers for the HTTP Response. My application uses Spring MVC.

My current @font-face configuration: 

@font-face{font-family:'tinymce';
  src:url('fonts/tinymce.woff') format('woff'),
  url('fonts/tinymce.ttf')format('truetype'),
  url('fonts/tinymce.svg#tinymce') format('svg');
  font-weight:normal;
  font-style:normal}
qlangman
  • 43
  • 7

2 Answers2

0

It's hard to guess without being able to look at a demo. But since IE11 downloads an EOT, which isn't present in your @font-face rule, it looks like the CSS you think is being executed is not the CSS the browser uses.

If the @font-face rule is okay (but you copy/pasted the wrong one here), then perhaps the installable bit isn't set on the font. IE11 needs that, but on the other hand, you would expect an icon font to have taken care of this.

It's also possible the mime type isn't set correctly on the fonts served. See this thread for some troubleshooting options.

And, if you find the solution, please post it here so others can learn too! :-)

RoelN
  • 2,181
  • 13
  • 15
  • Sorry for the confusion. I was playing around with editing my @font-face configuration to see if I could force IE11 to download *.woff rather than *.eot in case that would fix the issue. It did not fix the issue. Also, that's when I copy+pasted my configuration, leaving out the *.eot option. However, on my local build of the app, when I force IE11 to download the *.woff, it plays nicely, displaying the icons. Not so much on the cloud instance. – qlangman Sep 12 '19 at 17:56
0

The solution was indeed getting rid of the "pragma" header. Since my project was a Spring Boot application, I created a header filter in my security configuration class. To create a Spring security configuration class: 1. Create a class that extends org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter. 2. Give the class the following annotations:

-@Configuration (org.springframework.context.annotation.Configuration) -@EnableWebSecurity (org.springframework.security.config.annotation.web.configuration.EnableWebSecurity)

-@EnableGlobalMethodSecurity(securedEnabled = true, prePostEnabled = true) (org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity)

  1. Within the class, create a method with @Bean annotation. Here is my complete definition:

    public HeaderWriter cacheControlHeaderWriter()
{
    return new DelegatingRequestMatcherHeaderWriter(
        new NegatedRequestMatcher(new RegexRequestMatcher(".+\\.((eot(\\?)?)|(woff2?)|(ttf)|(svg))", "GET")),
        new CacheControlHeadersWriter()
    );
}
qlangman
  • 43
  • 7