@font-face problem with Facebook in IE8

December 16, 2011 | No comments

While working on a Facebook app that uses web fonts through an @font-face declaration created with Font Squirrel, I noticed a bizarre bug in IE8 in which all the text in the parent frame (ie Facebook) takes on one of the custom fonts supported with an EOT file. Despite the fact that it’s rather amusing to see all of Facebook rendered in a fancy display font, it would be very wrong and shocking for a user to see this.

Searching for a workaround, I came across a few different posts that helped me understand the issue better, but didn’t quite work in the context of a Facebook app.

The heart of the issue is this: the parent frame will take on the EOT font when that EOT loads for the iframe, if the parent frame has not already finished loading at the time.

The solution needs to be this: load the EOT for the font after the parent frame has finished loading.

To do this, we need to perform a little bit of javascript trickery (I’m using jQuery and Facebook Javascript SDK here).

  1. Remove any EOT fonts from the CSS properties for all elements in your (iframed) page, but keep the @font-face declaration in your CSS file. Create a unique class for each EOT font. For example:@font-face {
    font-family: 'CairoRegular';
    src: url('cairo-webfont.eot');
    src: url('cairo-webfont.eot?#iefix') format('embedded-opentype'),
    url('cairo-webfont.woff') format('woff'),
    url('cairo-webfont.ttf') format('truetype'),
    url('cairo-webfont.svg#CairoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    .CairoRegular {
    font-family: ‘CairoRegular’;
    }

  2. Next, create a function that adds this class to the elements that need it:function addfonts(){
    $("#header h1,#content h3,#content h6,.cssbutton").addClass("CairoRegular");
    $("#header h4,#header h2,#header h3").addClass("BallparkWeiner");
    }
  3. And finally, add the FB.Canvas.getPageInfo() function somewhere after your FB.init function and put your font function inside the callback:FB.Canvas.getPageInfo(function() {
    addfonts();
    });

    The getPageInfo() function was the closest thing I could find to a listener for the parent page load completion. If you can find something better, by all means use that.

Tagged: , , ,

Leave a Reply