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>

这是它最终的样子：

出于某种原因，当页面重新加载时，有时不会发生这种情况。但大多数时候，这种情况会发生。当我使用谷歌字体时，这也不会发生。

所以我想知道这里出了什么问题？我认为加载页面资源（在这种情况下为字体）存在问题，但无论哪种方式都不应该发生......有什么想法吗？