mimonelu

ウェブフォント

任意のフォントファイルを利用できる機能。
(ここでは作り方については触れない。プロダクトで作成した経験のあるデザイナーに聞くと良い。)

デモ

ウェブフォント

単純に文字のフォントを変更する例。

アイコンフォント

文字ではなく、アイコンとして作られたウェブフォントをアイコンフォントと呼ぶ。
たいていの場合、半角文字 1 文字にアイコンひとつが割り当てられる(下記フォントでは a に時計のアイコンが割り当てられている)。

ベクターグラフィックなので拡縮しても滑らかで色も変更できる。
単色画像に限られるが、アイコンフォントは工数削減と品質向上を同時に実現する定石的な技術だ。

注意

応用例

See the Pen Webfont Demo by Stephy (@blindingstars) on CodePen.