Search code examples
internet-explorer-9font-facesimplemodal

IE9 isn't applying @font-face fonts for a modal after it's shown

So, I've got a page w/ a SimpleModal on it, and fonts are applied via Typekit (which uses some tricky JS to set up some @font-face rules) and everything is just dandy.

Except for the modal itself; when you click to open it, the @font-face fonts aren't applied, so things look janky. If, however, you close it & re-open it, or you use the Developer Tools, the font is suddenly magically applied.

Anybody seen this?

Solution

  • So Eric provided the answer (considering he's the developer of SimpleModal, that makes sense.)

    Anyway, just need to add clone: true to the call for the modal, like so:

    $(element).modal({clone:true})

    And then IE9 renders @font-face stuff right away! Brilliant.