html - 幅に関するインポートされたフォントの問題

Question

@font-face {
    font-family: 'BryantMedium';
    src:url('fonts/bryant-medium-webfont.eot');
    src:url('fonts/bryant-medium-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/bryant-medium-webfont.svg#BryantMedium') format('svg'),
        url('fonts/bryant-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

これは私がフォントをインポートする方法です。サンプルの div は次のとおりです。

<div id="info">
by <span id="name">USERNAME</span> on <span id="date">24 Nov 2013</span>
</div>

最終的には次のようになります。

何らかの理由で、ページをリロードすると、これが発生しないことがあります。しかし、ほとんどの場合、これは起こります。これは、Google フォントを使用する場合にも発生しません。

だから私はここで何がうまくいかないのだろうか？ページのリソース (この場合はフォント) の読み込みに問題があると思いますが、いずれにせよ、これは起こらないはずです...何かアイデアはありますか?