Font Awesome の利用をやめた

Published at 2016-12-26

このブログでは Font Awesome を使っていたが、それをやめた。Webフォントのロードをやめたことに引き続いて、これで Web フォントの利用から脱却したことになる。

Font Awesome を使っていた箇所の修正

今回修正したのは次のリスト。利用頻度は多くないが、ロードしているリソースサイズが大きく見合わないと感じ、今回に至る。

ページングの  を 👈　に変更
ページングの  を 👉　に変更
RSS の  を SVG ファイルに変更
♡ の  を SVG ファイルに変更
Facebook の  を SVG ファイルに変更
Twitter の  を SVG ファイルに変更
Google Plus の  を SVG ファイルに変更

それぞれの SVG ファイルは Sketch でトレースしたベクターデータから出力し、svg/svgo で最適化してある。また、素直(?)に <img> で参照したかったので、fill 属性にそれぞれのプラットフォームで定められた色を指定したものを用意した。

絵文字にできそうなものは絵文字にしてある。RSS も 📡 などで代替できそうだが、バランスを取ってアイコンのままにしてある。

Heart Google Plus

ロードしなくなったリソース

代替を用意した後は cdnjs.com から Font Awesome をロードしていた <link rel="stylesheet"> を外すだけだった。CSS ファイルは 6.3KB なのでまだしも、CSS からロードされるフォントファイルが 75.7KB と重かった。代替リソースは合計で 3.6KB なので、それなりに軽減されている。