CSSでカスタムフォントを使用するには？

Question

最も美しいフォントhereが見つかりました。私はそれを使いたい。

@font-face { 
    font-family: myFirstFont; 
    src: url(http://fontsforweb.com/font/show/?id=78041); 
} 

div { 
    font-family: myFirstFont; 
} 

（出典：https://www.w3schools.com/css/css3_fonts.asp）

Answer 1

フォントあなたがそれをダウンロードすることができ、そのちょうどウェブサイトのための源ではない私は、次の試してみました。フォントをダウンロードしてフォルダフォントに置き、コードsrcをそのパスに変更します。

Answer 2

このコードを使用し、その後、プロジェクトに入れ、それを解凍し、フルzipファイルをダウンロードします。

@font-face { 
    font-family: myFirstFont; 
    src: url(MonsieurPomme.woff); 
} 

div { 
font-family: myFirstFont; 
} 

Answer 3

あなたは、フォントファイルをダウンロードし、様々なフォーマットへのリンクを追加する必要があり、あなたのブラウザによってどのサポートしたい：

@font-face { 
    font-family: 'MyWebFont'; 
    src: url('webfont.eot'); /* IE9 Compat Modes */ 
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

は、詳細はhttps://css-tricks.com/snippets/css/using-font-face/を参照してください。

Answer 4

font-faceを使用しています。

@font-face{ 
    font-family: ((fontName)); 
    src: url(fontname.woff); 
} 

他のフォントの呼び出し方法と同じように呼び出すことができます。

Answer 5

ウェブページだけでなく、フォントファイルに直接リンクする必要があります。

@font-face { 
    font-family: myFont; 
    src: url('font.eot'); /* IE9 Compatible Modes */ 
    src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('font.woff2') format('woff2'), /* Super Modern Browsers */ 
     url('font.woff') format('woff'), /* Pretty Modern Browsers */ 
     url('font.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('font.svg#svgFontName') format('svg'); /* Legacy iOS */ 

} 
div { 
    font-family: 'myFont', serif; 
}