ずいぶんと久しぶりの投稿です。最近仕事でFont AwesomeやGLYPHICONなどでアイコンなどでWebフォントを使う機会が増えてきました。 ですが、いざ人に確認してもらうと、Webフォントが文字化けして豆腐文字になってしまっていたり、謎の文字が出てきてしまったりと色んなケースで失敗してます。 今日は実際にやってみて文字化けした例を紹介します。 原因1 サーバーにフォントファイルをアップしていない CSSで「ここがフォントファイルの場所」と教えているのに、その先にフォントファイルがない場合に□となります。 ChromeやFirefoxの開発ツールではネットワークタブで404のステータスコードが返ってきますね。 自分でデザインをしていると、グラフィックソフトでWebフォントを利用するときにフォントファイルをインストールしていると、なかなか気付きづらいです。 対処法 CSSでフォントファ
![Webフォントで文字化けしたときのよくある原因と対処法 | Webデザインのタネ](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc2f4aa46a5ee5c46adada1695c7300e9a7d1961/height=288;version=1;width=512/https%3A%2F%2Fblog.1dz.jp%2Fwp-content%2Fuploads%2F2023%2F01%2F20150315_1113461.png)