フォントフェイス
@font-face ルールの記述に従って Web 上あるいはローカルのフォントリソースが必要に応じて自動的に読み込まれ、ページ内でスタイルとして使用できるようになる。複数の @font-face ルールを記述することで、重みや様式に応じて実際のフォントが選択されるような、複数のフェイスを持つフォントファミリーを定義することができる。
目次
使い方
参考：
@font-face で Web フォントを使おう | ほんっとにはじめての HTML5 と CSS3
Web フォント、ローカルフォントの指定方法 | softel メモ
@font-face – Web フォントの利用 | CMAN
Web フォントの利用を指定する @font-face 規則の使い方 | できるネット
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 以下用
参考：
CSS @font-face Rule | W3Schools
src
参考：
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：非常に短いブロック期間のみを設け、スワップ期間は設定しない。
→ ブロック期間内に指定したフォントがダウンロードされなければ代替フォントで表示される。
設定方針
- ブラウザに任せる →
auto - すぐに表示されなくてもよい →
block - すぐに表示する →
swap - 時間が掛かった場合に表示を入れ替えない →
fallback - 特にそのフォントでなくてもよい →
optional
参考：
Web フォントを使う場合に font-display 記述子を使ってすぐにテキストを表示させる | ラボラジアン
font-display – Web 制作者が知っておきたい、Web フォントを快適に表示する CSS の新しいプロパティ | コリス
Controlling Font Performance with font-display | Google Developers [Official]
font-display | Can I Use Support Tables
ウェイト／スタイル別にフォントを割り当てる
参考：
@font-face で複数の weigth や style を持つ Web フォントを定義する方法 | WEB クリエイターの部屋
サブセットを使う (unicode-range)
参考：
CSS の @font-face で合成フォント (サブセット) っぽいことをしてみる | SPYWEB
Font unicode-range Subsetting | Can I Use Support Tables
自前でフォントを用意する
参考：
Web フォントをサーバにアップロードして使うには？注意点や実装方法まとめ | 株式会社グランフェアズ
ヒラギノ角ゴシックのウェイトを調節する
参考：
CSS でヒラギノ角ゴシックのウェイトを指定する方法 | Ryusei’s Notes
El Capitan のヒラギノ角ゴシック | Noriyuki Shimizu
Tips
参考：
Best Practices for Fonts | Google web.dev
規格
参考：
@font-face 規則 | CSS Fonts Module Level 3 日本語訳 (triple-underscore.github.io)