モバイルデバイスにfont-familyが適用されていません

Question

cssのfont-familyプロパティに問題があります。私は、特定のフォントを使用してスタイルを設定するタイトルを持っています。私は@fontfaceを使用しています。私のデスクトップ上では正常に動作しますが、iPhoneとiPadには標準フォントがあります（時間がかかるかもしれませんが、わかりません）。私はいくつかの研究を行い、ttfなどの異なるフォーマットを試しましたが、まだ動作していませんでした。最後に、うんざりして、私は自分のCSSのフォントを他のシステムフォントに変更しようとしましたが、電話はまだそれらを認識していません。基本的には1つのフォントがついています。ここでは、デスクトップ上のフォントの例のカップルです：

3枚の第1の画像は、私はデスクトップ版に適用されている別のフォントファミリです。 @fontfaceを使用すると、システムフォント、Googleフォント、およびカスタムフォントがあります。すべての仕事。

第4のイメージは、フォントのそれぞれについてiPhoneとiPadの両方に表示されているものです。常に同じもの。何が起こっているの？任意の提案が高く評価されました。

カスタムフォントのための私のコードは次のとおりです。

@font-face {font-family: QuaestorSans; 
      src: url("fonts/QuaestorSans-Rg.otf") format("opentype"), 
       url("fonts/QuaestorSans.ttf") format("opentype"); 
} 


.title{ 
    font-family: QuaestorSans; 
    font-size: 2em; 
    letter-spacing: 1.4px; 
} 

HTML

アリス 空soyer地球

上の文字をフェード少しのアニメーションがありますしかし、私はそれがフォントファミリに耳を傾けてください（そして、携帯端末でのみですか？）。

あなたはそれがalicesoyer.com

のウェブサイトをチェックアウトしたい場合は、フォントファミリーのための唯一のルールがありますが、あなたはデスクトップとモバイルのサイトをテストする場合には（私はiPhone上でテストしていと今のところiPad）あなたは異なる家族を見るでしょう。おかげでほとんどのモバイルデバイスのための右のフォントフォーマットを持っていないことが原因で発生

Answer 1

は、あなたが

Answer 2

を使用しているフォントの正しいコードを生成するためにhttps://www.fontsquirrel.com/tools/webfont-generatorのようなサービスを使ってみて、すべてこのフォーマットを試してみてください（一例に過ぎfont-家族）..

@font-face { 
font-family: 'LatoRegular'; 
src: url('../fonts/LatoRegular.eot'); 
src: url('../fonts/LatoRegular.eot') format('embedded-opentype'), 
    url('../fonts/LatoRegular.woff2') format('woff2'), 
    url('../fonts/LatoRegular.woff') format('woff'), 
    url('../fonts/LatoRegular.ttf') format('truetype'), 
    url('../fonts/LatoRegular.svg#LatoRegular') format('svg'); 

}
は、一部のブラウザでは、異なるフォーマットを必要とするので、それが動作するはずですこれらすべてのフォーマットを使用します。