2

I’ve had an odd error come through on my latest project. It hasn’t launched so I can’t share (because of contract obligations with my company), but here are some details:

  • Facebook page via iFrame
  • Issue seems to be in IE7-8 only
  • Using custom @font-face fonts
  • Cannot reproduce issue on VirtualBox
  • When opening the page out of Facebook in the same browsers the issue is not reproduced (Facebook is contributing to the issue)

The issue is that the fonts load fine when the page loads originally in IE7-8, when the user goes to an interior page all @font-face fonts revert to their web-safe font backups. They will stay that way (even returning to the first page that had the fonts loaded) until the cache is cleared. The fonts load & stay loaded on the same test machine in Chrome & Foxy.

I found this error here, Facebook JS affecting CSS/@font-face in IE?, but it suggest that using the iFrame version should fix the issues, and we are using the iFrame version.

Anyone have any ideas?

Community
  • 1
  • 1
Ammi J Embry
  • 637
  • 4
  • 17
  • It's difficult to help you, without any code provided. Please write down a code snippet which reproduces your issue. – borisdiakur Jul 13 '12 at 15:11
  • Due to the nature of my work, I cannot share the code. It's a post the code and risk my job or not post the code & not get assistance here kind of issue. – Ammi J Embry Jul 13 '12 at 19:52

1 Answers1

1

This is IE8(?) bug. You need to reload CSS stylesheet after page loads.

Add ID to your link element:

<link rel="stylesheet" href="css/style.css" id="css-element" />

and then (using jQuery):

$(document).ready(function() {
    $('#css-element')[0].href=$('#css-element')[0].href;
});

...or use Modernizr feature (to not reload in every browser):

$(document).ready(function() {
    if ($('html.lte-ie9').length > 0)
    {
        $('#css-element')[0].href=$('#css-element')[0].href;
    };
});

EDIT: see also: IE8 web font iframe bug workarounds

Community
  • 1
  • 1
long
  • 3,692
  • 1
  • 22
  • 38