任意のフォントファイルを利用できる機能。
(ここでは作り方については触れない。プロダクトで作成した経験のあるデザイナーに聞くと良い。)
デモ
ウェブフォント
単純に文字のフォントを変更する例。
アイコンフォント
文字ではなく、アイコンとして作られたウェブフォントをアイコンフォントと呼ぶ。
たいていの場合、半角文字 1 文字にアイコンひとつが割り当てられる(下記フォントでは a
に時計のアイコンが割り当てられている)。
ベクターグラフィックなので拡縮しても滑らかで色も変更できる。
単色画像に限られるが、アイコンフォントは工数削減と品質向上を同時に実現する定石的な技術だ。
注意
- ウェブフォントにはダウンロードという手間が発生するため、ファイルサイズには常に配慮する必要がある。
-
日本語フォントは漢字も含めるとファイルサイズが数 MB と大きくなる。
選定の際は、JIS 漢字コードにおける第 1 水準漢字のみ含むこと、などの基準を設けると良い。 - アルファベットなどの半角文字のみ使用する場合は、応用例のように Google Fonts を利用するのが一般的。
- Google Fonts にも日本語の早期アクセスがあるが、書体は少ない。
応用例
See the Pen Webfont Demo by Stephy (@blindingstars) on CodePen.