Webフォント とは？

端末に入っていない書体をWebサイトで使うためだよ。フォントファイルを読み込むことで、選んだ書体で表示しやすくなるんだ。端末の標準フォントを使う設計もできるので、目的に合わせて選ぼう。

CSSの@font-faceで書体の名前とファイルの場所を定義し、font-familyでその名前を指定するよ。自分のサーバーに置く方法も、配信サービスを使う方法もある。フォントによって利用条件が違うので、ライセンスも確かめよう。

読み込み中の表示はfont-displayで調整できるよ。例えばswapは、代替フォントを先に見せ、読み込めたら切り替える設定だね。切り替わると文字の幅や改行が変わる場合もあるから、代替フォントでも読みやすいか確認するんだ。

使える文字や太さが多いほど、届けるデータも増えやすいよ。必要な文字だけを含むサブセットのファイルを作る方法があるんだ。unicode-rangeで文字の範囲を指定すると、その範囲が必要なときだけ対応するファイルを読み込ませられるよ。CSSの指定だけで元ファイルが小さくなるわけではないんだ。

読み込みが成功し、その書体に文字があれば使えるけれど、設定や環境で表示は変わるよ。WOFF2は主要なブラウザが対応する形式だけれど、対象環境を確認しよう。読み込めない場合や、その書体にない文字には代替フォントが使われることもあるんだ。