ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeやGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。 ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、謎の文字が出てきてしまったりと色んなケースで失敗してます。 今日は実際にやってみて文字化けした例を紹介します。 原因1 サーバーにフォントファイルをアップしていない CSSで「ここがフォントファイルの場所」と教えているのに、その先にフォントファイルがない場合に□となります。 ChromeやFirefoxの開発ツールではネットワークタブで404のステータスコードが返ってきますね。 自分でデザインをしていると、グラフィックソフトでWebフォントを利用するときにフォントファイルをインストールしていると、なかなか気付きづらいです。 対処法 CSSでフォントファ