Jquery 自定义字体css更改在chrome中呈现缓慢

我遇到了一个非常奇怪的问题，我有如下一些标记：

<i id="battery-status-icon" class="icon icon-megaphone-1"></i>

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "custom_icons";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-megaphone-1:before { content: '\e894'; } /* '' */
.icon-progress-0:before { content: '\e899'; } /* '' */

现在如果我要使用jquery来更改图标

$('#battery-status-icon').removeClass('icon-megaphone-1').addClass('icon-progress-0');

---

然后渲染新图标需要一段时间，大约10秒左右。在firefox和其他浏览器中，它就像一个符咒。如何在Chrome中修复此问题？

我无法在codepen中重现此问题：。可能是你的页面上的其他东西导致了这个问题吗？嗨，Cassie-谢谢你研究这个问题-我们的页面上有其他元素，如果在其他浏览器上速度超快，我想这主要是chrome在呈现woff字体方面的错误：（-我想我只是决定问这个问题，作为一个长远的问题！）！