フォントフェイスを定義する方法 (@font-face) [CSS]

フォントを指定する方法 (font-family)

フォントフェイス

@font-face ルールの記述に従って Web 上あるいはローカルのフォントリソースが必要に応じて自動的に読み込まれ、ページ内でスタイルとして使用できるようになる。複数の @font-face ルールを記述することで、重みや様式に応じて実際のフォントが選択されるような、複数のフェイスを持つフォントファミリーを定義することができる。

使い方

参考：

@font-face で Web フォントを使おう | ほんっとにはじめての HTML5 と CSS3

Web フォント、ローカルフォントの指定方法 | softel メモ

@font-face – Web フォントの利用 | CMAN

Web フォントの利用を指定する @font-face 規則の使い方 | できるネット

@font-face | Web デザインラボ

@font-face | とほほのＷＷＷ入門

@font-face | WWW クリエイターズ

Using @font-face | CSS-Tricks

@font-face Rule | W3Schools

Web フォントの種類

WOFF / Web Open File Format (.woff) ── モダンブラウザ用
WOFF2 / Web Open File Format 2 (.woff2)
TrueType (.ttf) ── Android 4.3 以下用
OpenType (.ttf / .otf)
Embedded OpenType (.eot) ── IE 用
SVG font (.svg / .svgz) ── iOS 5 以下用

参考：

@font-face | Web デザインラボ

@font-face | MDN

CSS @font-face Rule | W3Schools

src

参考：

src | MDN

When using CSS @font-face, in what order do browsers use the different types? – Stack Overflow

font-display

auto：クライアントのデフォルトの戦略を使用する。ほとんどのブラウザで block に似た挙動を示す。(デフォルト)
block：短いブロック期間の後に永続的なスワップ期間を設定する。
→ 指定したフォントがダウンロードされなければ3秒程度何も表示されず、それ以降は代替フォントで表示され、フォントがダウンロードされ次第入れ替えられる。
swap：非常に短いブロック期間の後に永続的なスワップ期間を設定する。
→ すぐに代替フォントが表示され、指定したフォントがダウンロードされ次第入れ替えられる。
fallback：非常に短いブロック期間の後に短いスワップ期間を設定する。
→ ブロック期間内に指定したフォントがダウンロードされなければ代替フォントで表示され、スワップ期間内にダウンロードされなければ代替フォントの表示を維持する。
optional：非常に短いブロック期間のみを設け、スワップ期間は設定しない。
→ ブロック期間内に指定したフォントがダウンロードされなければ代替フォントで表示される。