加载另一个页面后，我的字体渲染会发生什么变化？

Question

我正在为网站制作原型并使用自定义字体。 Chrome中没有任何问题，但是当我在Firefox 19.0.2中显示它时会发生以下情况。

如果它是唯一显示的网站，则字体显示正常，如下所示：

一旦我在另一个标签中加载网站，该字体可能会或可能无法正确呈现，具体取决于网站。例如，一旦我加载Facebook，大约半秒后字体将变为以下内容：

为什么会这样？我该怎么做才能解决这个问题？

编辑： 字体堆栈：

@font-face {
    font-family: 'sofia_pro_lightregular';
    src: url('SofiaProLight-webfont.eot');
    src: url('SofiaProLight-webfont.eot?#iefix') format('embedded-opentype'),
         url('SofiaProLight-webfont.woff') format('woff'),
         url('SofiaProLight-webfont.ttf') format('truetype'),
         url('SofiaProLight-webfont.svg#sofia_pro_lightregular') format('svg');
    font-weight: normal;
    font-style: normal;
    }

我正在实现它：

* { 
    font-family: 'sofia_pro_lightregular';
    }