字体不适用于Chrome和Firefox，但适用于Safari

Question

我使用css创建了一个div的弹出窗口。这是我的代码。

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
.popups-right {
    background: #f57b20 none repeat scroll 0 0;
    border-radius: 40px;
    font-family: 'Oswald', sans-serif !important;
    color: #fff;
    font-size: 26px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    right: -120px;
    padding: 15px;
    position: absolute;
    text-align: center;
    width: 33%;
    line-height: 40px;
}

.popups-right::after {
    border-left: 0px solid transparent;
    border-right: 54px solid transparent;
    border-top: 20px solid #f57b20;
    bottom: -12px;
    content: "";
    display: block;
    height: 0;
    position: absolute;
    width: 0;
}

这是我的HTML代码

<div class="popups-right">
   <h3 style="color: #34213e;">ready to get fixed?</h3>
   <h3 style="color: #fff;">dont forget to include <br>this form in your order</h3>
   <h3 style="color: #fff;">simply click on this image <br>and start typing</h3>
   <h3 style="color: #fff;">please mark any areas you see <br>with pins. <span style="color: #34213e;">do not</span> use tape.</h3>
</div>

字体在Chrome和Firefox中未按预期工作，但在Safari上效果很好。我对这个问题一无所知。请帮忙。

这就是它在safari中的样子：

但这就是它在chrome和firefox上的工作原理：

该页面现场可用：http://alterknit.staging.wpengine.com/packing-slip/

Answer 1

给泡泡中的每个标题添加一个类，例如.popups-right-title＆amp;给出样式

.popups-right-title {
  font-family: 'Oswald', sans-serif !important;
}

避免使用!important声明来声明规则，因此将来不会出现此类问题。

Answer 2

显然这个声明：font-family: 'Oswald', sans-serif !important;并不能一起使用。

第二次渲染使用了一些serif字体，但未使用sans-serif声明。

使用DOM检查器/调试工具来发现覆盖您的其他规则。