@ fontfaceをstyle.cssに使用してカスタムフォントを追加する

Question

私はウェブページ上で使用したいカスタムフォントを持っています。具体的にGT-Walsheim-PRO-ミディアムOblique.woffから：
https://andrewsonline.co.uk/content/fonts/

私が働いているstyle.cssにはこれです：
https://github.com/syunghong/veil/blob/master/css/style.css

どのように私はに@fontfaceを使用して、このフォントファイルをincorperateありません私のstyle.cssファイル？
私はGT-Walsheim-Pro-Medium-Oblique.woffをfontsというフォルダに持っています。

Answer 1

ここ

@font-face { 
    font-family: 'RobotoBold'; /*this is what you put on your font family*/ 
    src: url('../fonts/Roboto-Bold.ttf'); /*Link to the font*/ 
} 

あなたは、webfontを使用し、元のTTFまたはOTFフォントを取得し、フルセットhere at FontSquirrelをレンダリングする権利を所有している場合

p { 
    font-family: RobotoBold; 
    font-size: 14; 
} 

Answer 2

それを使用します。異なるブラウザでは異なるフォントタイプが好まれますが、古いブラウザは最もピックアップされます。

次に、スタイルシートの先頭にフォントを追加して、FOUT、「スタイルのないテキストのFlash」が表示されている場合は、スタイルシートを最初にロードするか、スタイルシートの前にロードします。 More info hereしかし、基本的には、あなたのhtmlが読み込まれる前にフォントをロードして準備しておきたい。

次に、このようなあなたのフォントをロードします。

@font-face { 
     font-family: 'GT Walsheim Pro Medium Oblique'; 
     src: url('GT-Walsheim-Pro-Medium-Oblique.eot'); 
     src: url('GT-Walsheim-Pro-Medium-Oblique.eot?#iefix&v=4.6.3') format('embedded-opentype'), 
     url('GT-Walsheim-Pro-Medium-Oblique.woff2') format('woff2'), 
     url('GT-Walsheim-Pro-Medium-Oblique.woff') format('woff'), 
     url('GT-Walsheim-Pro-Medium-Oblique.ttf') format('truetype'), 
     url('GT-Walsheim-Pro-Medium-Oblique.svg') format('svg'); 
     font-weight: normal; 
     font-style: normal; 
    } 

フォントリスますあなたのための出力上記のコードを使用すると、そこにフォントパッケージをレンダリングするとき。

このようなあなたのCSSでフォントを呼び出して、私は常にケースもエラーでフォントのフォールバックを持っているか、何らかの理由でロードされないことを確認し、一例として、あなたのHのタイトルを使用しています：

h1, h2, h3, h4, h5, h6 { 
    font-family: 'GT Walsheim Pro Medium Oblique', arial, sans-serif; 
}