Databases
StackOverflow2013
Postsdbo
PO@font-face does not work in IE on initial page load, but does after that
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO@font-face does not work in IE on initial page load, but does after that
    text
    copied!<p>We have a problem whereby we successfully implemented @font-face for IE6-9 as normal, and in fact on the client site in question it all worked fine.</p> <p>Then we copied the skin over to two new sites for client (testing and production) whereby the font replacement still worked as expected. Over night these sites had SSL certs applied.</p> <p>The following morning it appeared that font replacement was no longer working much to our annoyance. Throughout this period of 'discovery' and 'anguish' @font-face worked in everything but IE.</p> <p>After a fair bit of mucking about thinking the whole thing was broken we realised that the problem only occurred on a pages first load. If you clicked on the sites menu and went to another page with a font replaced element @font-face worked as expected (IE6 and up).</p> <p>So the question for you all is, why does @font-face not work on first page load, but works fine when you navigate through said site's page thereafter?</p> <p>Could it have anything to do with IE and SSL?, perhaps something kills IE's rendering on first load due to the extra security checks going on in the background, which are eliminated by the time a user browses to another page within the site.</p> <pre><code>@font-face { font-family: 'BrisaAlternatesRegular'; src: url('/morph2/css/brisaalt-webfont.eot'); src: url('/morph2/css/brisaalt-webfont.eot?#iefix') format('embedded-opentype'), url('/morph2/css/brisaalt-webfont.woff') format('woff'), url('/morph2/css/brisaalt-webfont.ttf') format('truetype'), url('/morph2/css/brisaalt-webfont.svg#BrisaAlternatesRegular') format('svg'); font-weight: normal; font-style: normal; </code></pre> <p>}</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