CSSでカスタムフォントをインストールするには

Question

私はFontsという名前のフォルダに2つのカスタムフォントを持つフォルダを持っており、そのうちの1つはPlayfairDisplay-Blackと呼ばれています。私が開発しているサイトでそれらを使う方法がわからないのですか？

これらのフォントはどのように使用できますか？

Answer 1

特殊なCSS @ font-face宣言は、さまざまなブラウザが頭痛の原因にならない適切なフォントを選択するのに役立ちます。

@font-face{ 
    font-family: 'MyWebFont'; 
    src: url('WebFont.eot'); 
    src: url('WebFont.eot?#iefix') format('embedded-opentype'), 
     url('WebFont.woff') format('woff'), 
     url('WebFont.ttf') format('truetype'), 
     url('WebFont.svg#webfont') format('svg'); 
} 

あなたがしなければならないのは、このように、あなたのHTMLにスタイルシートへのリンクです：

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 

があなたの新しいフォントを利用するには、それらを使用するために、あなたのスタイルシートを伝える必要があります。上の元の@ font-face宣言を見て、 "font-family"というプロパティを見つけてください。そこにリンクされている名前は、フォントを参照するために使用するものになります。変更したいセレクタの内側の "font-family"プロパティのフォントスタックに、そのWebフォント名を追加します。たとえば：

p { font-family: 'MyWebFont', Arial, sans-serif; } 

Answer 2

はあなたのCSSでこれを試してみてください：

@font-face { 
    font-family: 'MyFairFont'; /*to use later*/ 
    src: url('http://exampledomain.com/fonts/PlayfairDisplay-Black.ttf'); /*URL to the font*/ 
} 

そして、特定の要素にフォントを使用する：

.myclassname { 
    font-family: 'MyFairFont'; 
} 

Answer 3

あなたはhttps://www.fontsquirrel.com/tools/webfont-generatorで簡単に欲しいものを達成することができますかhttps://www.web-font-generator.com/あなたはあなたのフォントをアップロードして、大多数のブラウザやそれらのフォントを呼び出すCSSで動作させるのに必要なフォーマットでフォントを入手できます。あなたのプロジェクトにフォントをアップロードし、あなたが提供するCSSスニペットを含め、フォントを適切にリンクしてください。

Answer 4

あなたはこのように、あなたのHTMLでのフォントスタイルへのリンクを実行する必要があります。

<link rel="stylesheet" href="fonts/fonts.css" type="text/css" /> 

fontsquirrel.comまたはtransfonter.orgのようなサードパーティ製のアプリケーションからフォントフェイスを生成し使用してフォントファイルを添付した後のようなあなたのCSSのフォントに追加します

@font-face { 
    font-family: 'open_sansregular'; 
    src: url('fonts/opensans-regular-webfont.eot'); 
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('fonts/opensans-regular-webfont.woff2') format('woff2'), 
     url('fonts/opensans-regular-webfont.woff') format('woff'), 
     url('fonts/opensans-regular-webfont.ttf') format('truetype'), 
     url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

変更するセレクタ内の "font-family"プロパティのフォントスタックに、そのwebfont名を追加します。たとえば、次のように

p { font-family: 'open_sansregular'; } 

注： これはもはや適用されwebfontパターンに基づいています。 eotはIE8以外では使用されていませんが、svgは文字通り保守されていないフォーマットであり、主なブラウザでは積極的に削除されています.WOFFはttfやotfソースのバイト単位のラッパーです。 ttf/otfもWOFFをサポートしているので、両方を読み込むことに意味はありません。現代的なブラウザでは、WOFF（必要な場合はWOFF2が必要ですが、まだ十分にサポートされていません）をロードし、IE8-サポートが必要な場合はeotを追加してください。