アイコンフォントをPCにインストールしている場合は、コーディング後の確認に注意

アイコンフォントが使用されたデザインデータを開くためには、自分のPCにアイコンフォントをインストールする必要があります。
もし、インストールしていない場合は、下の画像のように「？」と表示されてしまいます。

そのため、デザインやコーディングをする人はFont Awesomeやマテリアルデザインアイコンなど、主要なアイコンフォントはPCにインストールされた状態になっていると思います。

しかし、サイトを実装するときには無効化にしておかないと、アイコンフォントの設定がちゃんとできていないのに、設定できていると勘違いを起こしてしまう可能性があります。

Font Awesomeが設定されていなくても表示されてしまうパターン

アイコンフォントに限った話ではないと思いますが、フォントがPCに入っている状態であれば、サイトの設定がうまくいっていなくても表示されてしまいます。

今回は疑似要素にFont Awesomeを設定するときを例に出しますが、font-familyの設定さえできていれば、PCにFont Awesomeが入っている人は普通に表示できてしまいます。

しかし、Font Awesomeを無効化すると、フォントが設定されていないので、四角い豆腐状態になってしまうのが分かります。

対処方法

ちゃんとアイコンフォントが設定されているかどうか確認するためにできることは下記のどちらかです。

• スマートフォンなど、アイコンフォントが入っていない端末でチェックする
• デザインツールを使うとき以外は、アイコンフォントは無効化にしておく

実機確認はするはずなので、その段階で気がつくはずですが、できればもっと早い段階で気づいておきたいですよね。

FontExplorer X Proなどのフォント管理ツールを使えば、普段は無効化しておいて、使いたいときだけ有効化にできます。

さらに、FontExplorer X Proの「アプリケーションセット」という機能を使えば、IllustratorやXD、Sketchなどのデザインツールを使うときだけアイコンフォントを有効化にして、それ以外のときは無効化にできます。

Webrandum

FontExplorer X Proのアプリケーションセット機能で、アプリを起動したタイミング...

https://webrandum.net/fontexplorer-x-pro-application-set

フォントの管理はFontExplorer X Proを使っているのですが、最近知った機能に「アプリケーションセット」という機能があります。アプリケーションを起動したタイミングで自動的にフォントを有効化するというもので、かなり使えそうな機能なので紹介します。アプリケーションセットの作成アプリケーションセットはサイドバーを右クリックして［新規アプリケーションセット...］を選択して作成します。作成時には「アプリケーション：」で有効化・無効化するアプリケーションを選択して「＋」ボタンを押せば、アプリの追加ができます。ア...

とりあえず忘れないように最初にちゃんと設定しておこうねという話なのですが、意外と後回しにしてしまいがちなので、こういった対策はしておくと良さそうです。