Webフォント

• 手元の端末ではなくネットワーク越しにフォントを取ってきて画面表示に使う仕組み。
• 画面表示がプラットフォーム非依存になるメリットがある。
• Webフォント - Wikipedia

Webフォントを使う - フォントサーバ

Google Fonts が代表的。無料で使える。

基本的に Google Fonts が示してくれたコードを貼り付ければ良い。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400&display=swap" rel="stylesheet">

font-family: 'Noto Sans JP'

Webフォントを使う - 自前

フォントをサブセット化する

特にアジア圏の言語の場合、文字数が多いためフォントファイルは巨大になりがち。
このため、実際に使う文字だけのサブセットを作ると良い。

• 日本語webフォントサブセット化について - Qiita
  • Pythonでフォントをサブセット化する方法【フォント軽量化】 | クソざこCoding
  • subset — fontTools 3.30 documentation
  • fonttools/fonttools: A library to manipulate font files from Python.

フォントファイルをWebフォントに変換

• 第332回　Webフォントをつくろう：Ubuntu Weekly Recipe｜gihyo.jp … 技術評論社
  • sfnt2woff OpenType -> WOFF
  • woff2sfnt WOFF -> OpenType

CSS に記述

@font-face {
  font-family: 'gagagaga';
  src: url('/assets/fonts/GAGAGAGA-FREE.woff') format('woff');
}

font-family: 'gagagaga'

フォントの本

参考

• 【2019年版】Linuxでも使えるフリーフォント集