フォントはChromeやFirefoxではなくSafariで動作します

Question

私はのポップアップをcssで作成しました。ここに私のコードです。

@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 &スタイルを与える

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

ルールを宣言するには!importantステートメントを使用しないでください。このような問題は今後発生しません。

Answer 2

明らかにこの宣言は、font-family: 'Oswald', sans-serif !important;が一緒に機能しません。あなたが宣言したように、第2のレンダリングは、いくつかのserifフォントではなくsans-serifを使用していることを

。

DOMインスペクタ/デバッグツールを使用して、自分の設定を上書きする他のルールを検出します。