Web fonts crash preview tab in IE

Topics: General
Sep 20, 2011 at 10:10 AM

Hi,

We have a C1 site which uses web fonts (purchased from MyFonts.com).

A css file is included which creates @font-faces, referencing the appropriate .eot, .ttf files etc. Example contents at the end of this post.

This works fine in IE and Firefox when browsing the site, and C1 works fine in Firefox.

However, in IE, if we click "Edit Page" and then click the "Preview" tab, the browser hangs, seemingly caught in an infinite loop.

If I remove the reference to the web fonts css file, it works fine (albeit without the web fonts, which won't be acceptable to the client :)

Edge case I know, but important for us that we get this working.

Any ideas / suggestions much appreciated.

Thanks,

Rob

E.g. web fonts css file below:

 @font-face {font-family: 'Swiss721GreekBT-Light';src: url('webfonts/eot/style_15.eot');src: url('webfonts/eot/style_15.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_15.woff') format('woff'),url('webfonts/ttf/style_15.ttf') format('truetype'),url('webfonts/svg/style_15.svg#Swiss721GreekBT-Light') format('svg');}
 @font-face {font-family: 'Swiss721BT-Thin';src: url('webfonts/eot/style_46.eot');src: url('webfonts/eot/style_46.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_46.woff') format('woff'),url('webfonts/ttf/style_46.ttf') format('truetype'),url('webfonts/svg/style_46.svg#Swiss721BT-Thin') format('svg');}
 @font-face {font-family: 'Swiss721BT-ThinItalic';src: url('webfonts/eot/style_47.eot');src: url('webfonts/eot/style_47.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_47.woff') format('woff'),url('webfonts/ttf/style_47.ttf') format('truetype'),url('webfonts/svg/style_47.svg#Swiss721BT-ThinItalic') format('svg');}

Coordinator
Sep 21, 2011 at 6:54 AM

Hello,

I just checked with these simple fonts in IE and it works fine:

@font-face {
    font-family: "FallbackCalibri";
    src: url("../fonts/Calibri.ttf");
}
@font-face {
    font-family: "FallbackCalibriItalic";
    src: url("../fonts/CalibriItalic.ttf");
}

 

Probably the problem with your specific fonts and as I see they have some #iefix. Can you preview your page in IE browser, not in C1 console?

Sep 21, 2011 at 8:02 AM

Hi Inna,

Thanks for getting back to me.

The page works fine in a full (non-iframe) IE browser, but hangs when viewed in the in the C1 console.

The only way I can stop it from crashing without completely disabling the web fonts, is to remove the first .eot reference, i.e.

@font-face {font-family: 'Swiss721GreekBT-Light';src: url('webfonts/eot/style_15.eot');src: url('webfonts/eot/style_15.eot?#iefix') format('embedded-opentype')...

This stops it from crashing, but the web font doesn't render in the C1 console - it falls back to Arial.

At least the client can use it now, so we can move forward. Would ideally like to get it working though. Can you think of anything that could be causing this?

According to the web developer tools, C1 appears to put IE in quirks mode (whereas Firefox runs in standards compliance mode). Could that be it?

Many thanks,

Rob

Coordinator
Sep 21, 2011 at 10:15 AM

You can try to move this CSS rules, for example, to the template something like this:

<!--[if IE]>
<style type="text/css">
@font-face {
font-family: 'Swiss721GreekBT-Light';
src: url('/webfonts/eot/style_15.eot?#iefix');
}
</style>
<![endif]-->
<!--[if !IE]>
<style type="text/css">
@font-face {font-family: 'Swiss721GreekBT-Light';
src: url('/webfonts/eot/style_15.eot');
}
</style> 
<![endif]-->