ttfフォントをWebフォントとして使用する

自分が作成したフォントでない場合には、いわゆるフリーフォントであってもWebフォントとして利用できるかどうか利用規約などに従う必要がある。

下記のページが参考になった。
https://plusoneweb.net/210415/

参考ページの通り、下記の手順で行う。
(1)フォントをサブセット化する
(2)Webフォント形式に変換する
(3)CSS/htmlに記述する

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

これは、必要な文字だけに絞ってフォントを軽量化することを「サブセット化」と言っている。
今回使うフォントは .ttf の状態で6MB程度。
サブセット化するために、Windowsのサブセットフォントメーカーを使用した。
https://opentype.jp/subsetfontmk.htm

後で使う「WOFFコンバータ」を起動するため、チェックを入れておく。
「フォントに格納する文字」については、本当に使う文字だけにしても良いし、あらかじめ使う範囲を予測して入れておくのも良い。
今回は、ひらがな、カタカナ、アルファベット、数字などだけを入れてみた。（メモ帳から貼り付け）

サブセット化を実施すると、約100KBの .ttf が作成された。
これだけでかなり小さくなるものですね。

(2)Webフォント形式に変換する

「WOFF2を作成する」と「EOTファイルを作成する」にチェックする。これは必要に応じてで良い。
変換してみると、それぞれ作成された。

元の .ttf ：約6MB
サブセットの .ttf：約100KB
サブセットの .woff：約56KB
サブセットの .woff2：約45KB
サブセットの .eot：約50KB

(3)CSS/htmlに記述する

webfontnameは任意にフォントの名前を付ける。
urlにはフォントをおいたパスを書く。
woff2を指定した例。

<style>
@font-face {
  font-family: 'webfontname';
  src: url('/fonts/webfontname.woff2') format('woff2'),
       url('/fonts/webfontname.woff') format('woff');
}
p.webfont {
  font-family: 'webfontname';
}
</style>

<p class="webfont">Webフォント</p>

src: urlに「サーバパスを指定しても良い」というような記事を見かけるものの、/home/user/webfontname.woff2 など、サーバの絶対パスを指定してみたところ動作させることができなかった。
https://www.ドメイン/home/user/webfontname.woff2 を探しにいっている模様。
フォントをドキュメントルート外に置いてダウンロードされないようにするのが理想だったのだが。