字體不能在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上可以正常工作。 我對這個問題一無所知。 請幫忙。

這是野生動物園的樣子：

但這是它在chrome和firefox上的工作方式：

該頁面可在此處實時訪問： http : //alterknit.staging.wpengine.com/packing-slip/

Answer 1

給氣泡中的每個標題一個類，例如.popups-right-title和給樣式

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

避免使用!important語句聲明規則，因此將來不會出現此類問題。

Answer 2

顯然，此聲明： font-family: 'Oswald', sans-serif !important; 不能一起工作。

第二個渲染使用一些serif字體，但沒有聲明的sans-serif serif字體。

使用DOM檢查器/調試工具發現覆蓋您的其他規則。