@ font-faceはIE 11では動作しません。@importはChromeで正常に動作していません。どうして？

Question

私は、GoogleフォントであるTitillium-Wenをすべての仲間に利用しようとしています。私はフォントファイルを自己ホストする方が好きです。

次のコードは、エッジ、SafariとChromeでうまく動作しますが、IE 11は、フォントを見つけることができないかのようにIEに11文字がバックアップフォントで表示されません。

@font-face { 
    font-family: 'Titillium Web'; 
    src: url('/fonts/titillium/TitilliumWeb-Regular.ttf') format('truetype'); 
    font-weight: 400; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Titillium Web'; 
    src: url('/fonts/titillium/TitilliumWeb-Italic.ttf') format('truetype'); 
    font-weight: 400; 
    font-style: italic; 
} 

@font-face { 
    font-family: 'Titillium Web'; 
    src: url('/fonts/titillium/TitilliumWeb-SemiBold.ttf') format('truetype'); 
    font-weight: 600; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'Titillium Web'; 
    src: url('/fonts/titillium/TitilliumWeb-Bold.ttf') format('truetype'); 
    font-weight: 700; 
    font-style: normal; 
} 

作品以下のコードをIE 11では、しかし、太字と斜体のフォントをChromeでは提供していません。そしてとにかく、私はフォントを自分自身をホストすることを好む：

@import url(https://fonts.googleapis.com/css?family=Titillium+Web); 

私はIE 11上で動作する@font-faceコードを取得することはできますか？

Answer 1

すべてのブラウザがTTFをサポートしているわけではないので、異なるフォント形式を使用してください。

@font-face{ 
    font-family:'My Font'; 
    src:url('../fonts/myfont.woff2') format('woff2'), 
     url('../fonts/myfont.woff') format('woff'), 
     url('../fonts/myfont.ttf') format('truetype'); 
    font-weight:normal; 
    font-style:normal; 
} 

フォントをさまざまなファイル形式に変換するWebサービスがあります。限り、私は懸念して、WOFF2を使用して、WOFFとTTは私がサポートする必要があるすべてのブラウザのバージョンをカバーしています。