Webフォントは自分のWebサーバーにダウンロードしなくても使えるように、共有公開されたフォントです。
例えばGoogle Fontsがある。利点は共有のフォントだと閲覧者がどのサイトを訪れようとも一回しかダウンロードしなくて済むので、各サイトで無駄な通信が解消されます。
欠点はいまいちライセンスがわからないことと、いつなんどき使えなくなるかわからないことです。
当サイトでも使用している再配布可能なフォントOradano明朝GSRRを例に使って実際に表示してみましょう。
することは簡単、あなたのサイトのWebフォントを反映させたいページで読み込んでいるCSSに下記を追加します。
1でフォントのあるURLを指定。例では当サイトにあるOradano明朝GSRR用のCSSを読み込んでいます。
2～4はお馴染みですね。例はp要素に反映するための記述です。
CSS上で追加する位置は最後の方がおすすめ。CSSでは後の記述が優先されるので、例の宣言ブロックが一番最後に読み込まれた方が追加という観点で威力を発揮します。
1の@で始まるアットルールは他のアットルールとまとめて上の方に書いた方が見栄えが良いかもしれません。font-familyが入った宣言ブロックより上であれば良く、好みです。
随時追加しています。フォント作者からのご連絡も大歓迎で受け付けております。
少なくとも、Web上のあなたのサイトで使うことにおいては自由です。詳しいライセンスは各作者のサイトをご覧あれ。
使用するときは赤色、青色を例の同じ色と置き換えて下さい。
Webフォント見本一覧 ちょっと重い（50MB強）のでギガ少ないときはご注意。
Webフォント画像見本一覧 とても軽い簡易版。
2022/3/7 おーすけ