Databases
StackOverflow2013
Postsdbo
POFont not loading correctly in IE9, some times
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFont not loading correctly in IE9, some times
    text
    copied!<p>I am having an issue where a font that I am hosting from the same server the page is being served from, is not loading in IE9. However, this is not always the case. Most of the time it loads correctly. I noticed that when it does not get displayed correctly, IE9 loads the .eot? (see css about question mark), .woff and the .ttf font files. When the font is displayed correctly, it only loads the .eot? file. Here is my CSS</p> <pre><code>@font-face { font-family: Rokkitt; src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot'); src: url('/Hormel/Fonts/rokkitt-bold-webfont.eot?#iefix') format('embedded-opentype'), url('/Hormel/Fonts/rokkitt-bold-webfont.woff') format('woff'), url('/Hormel/Fonts/rokkitt-bold-webfont.ttf') format('truetype'), url('/Hormel/Fonts/rokkitt-bold-webfont.svg#rokkittbold') format('svg'); } </code></pre> <p>I also added the .woff to the IIS MIME type, before that I was getting an 404 error when trying to load the .woff file and it would not load the .ttf file and the font would still not display correctly.</p> <p>From what I have read, IE9 is supposed to use the first .eot file, not the .eot?iefix file, is this correct?</p> <p>I tried loading this font from the google font library but i was experiencing the same issues in terms of the font not always showing up correctly.</p> <p>I don't know if this makes a difference, but I load the CSS on the landing page. When the user clicks on a certain element, I make an ajax call for the page to be displayed in a lightbox that appears. This is where the font is not displaying correctly. Also, when I try to inspect the content in the lightbox, the inspector says that the container, that is always on the page without any content loaded, is empty. </p> <p>EDIT**</p> <p>So when the fonts do not load, I get 3 <code>CSS3117: @font-face failed cross-origin request. Resource access is restricted.</code>, one for the .eot?#iefix file, one on the .woff file and one of the .ttf file.</p> <p>This is from Google and when I serve the font files from the same server as the web page.</p> <p>I also load two other fonts from Google, but do not have any issues with them. Just the Rokkitt font.</p> <p>I added </p> <pre><code>&lt;httpProtocol&gt; &lt;customHeaders&gt; &lt;add name="Access-Control-Allow-Origin" value="*" /&gt; &lt;/customHeaders&gt; &lt;/httpProtocol&gt; </code></pre> <p>To the web.config file and added Access-Control-Allow-Origin to the response header on the server.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload