IE11で、フレームを使ったページでFontAwesomeが表示されない時の対策

IE11に限り、フレームを使っているサイトで片側のフレームだけでFontAwesomeが表示されないことがあった。

どちらかのフレームが必ずなるわけではなく、左がなったり右がなったりする。

ググるとキャッシュの話などが出てくるが、フレームに関しては情報が皆無。

ピンときたのはHTML描画とファイル読み込みなどの完了タイミングがフレームごとにズレていること。
いずれかのフレームの描画が完了したら、他のフレームはフォントの読み込みが止まっているのでは？と推測した。

ならば確実にフォントの読み込みから行うまでと、HTMLにlinkタグでcssファイルを読み込む前に、ベタのstyleタグで下記のように記述した。

<style>
  @font-face {
    font-family: 'FontAwesome';
    src: url('/***/font-awesome/fonts/fontawesome-webfont.eot?v=4.5.0');
    src: url('/***/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('/***/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('/***/font-awesome/fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('/***/font-awesome/fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('/***/font-awesome/fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
  }
</style>

font-awesome.css の冒頭の内容と同じ。フォントファイルのパスだけ注意。

これを全ページに記述したところ解決した。

この記述だけを外部CSSファイルにしたら再発したので、外部CSSファイルからさらに外部フォントファイルを読みに行くのはIEでは不安定ということで間違いない。