TCDテンプレートのソーシャルボタン機能では、WEBフォントアイコンデータを使用していますが、文字化けして豆腐文字になってしまっていたりということがあるようです。これは、ワードプレスでWEBフォントを使用する時に起きる原因のためで、今回はその原因や対処法についてまとめましたので、もし表示がされないということがありましたら、記事を参考ください。

snsicon01

サーバーが対応していない

Webフォントのフォーマットは、WOFF（Web Open Font Format）、EOT（Embedded OpenType）、SVG（Scalable Vector Graphics）、SVGZ（gzip圧縮されたSVG）、TrueType、OpenTypeなどがあります。しかし、Webサーバーによっては拡張子が.eotや.otfファイルのものをダウンロードしないようになっていることもあります。ロリポップ！やさくらのレンタルサーバ（どちらも2005年あたりに契約の古いサーバ）で確認されています。

対処方法

.htaccessが書ける場合は、フォントを置いているフォルダに以下を書いた.htaccessのファイルを入れます。ただし、.htaccessの編集を誤ると、サイトが表示されなくなることがあります。ですので、.htaccessファイルを編集する前は、必ずバックアップを取って、失敗した時にいつでも復旧できるようにしておいてください。

<ifmodule mod_mime.c="">
    AddType font/opentype         .otf
    AddType font/eot              .eot
    AddType font/truetype         .ttf
    AddType application/font-woff .woff
</ifmodule>

これで拡張子が.eot、.ttf、.otf、.woffのものがフォントとして認識してもらえるようになります。

クロスドメインを許可していない

フォントを利用するサイトのドメインとWEBフォントを設置したサーバのドメインが異なる場合に利用ができないことがあります。

クロスドメイン制約によりFirefoxでFont AwesomeなどのWEBフォントを表示できない
http://blog.lowaivill.com/development/cross-domain/

さくらのレンタルサーバだとIE9以降でwebfontが文字化けする
http://qiita.com/ikedahidenori/items/a33236a40986cd22f37d

対処方法

フォントファイルを置いているディレクトリ直下の.htaccessに以下を追記します。「”」の中で書いているURLを許可したいドメイン名に置き換えてください。

<ifmodule mod_headers.c="">
  <filesmatch "¥.(ttf|otf|eot|woff)$"="">
    Header set Access-Control-Allow-Origin "https://tcd-theme.com/"
  </filesmatch>
</ifmodule>

対象ファイルの拡張子を FilesMatch タグで指定し、アクセスを許可するドメインを Header set Access-Control-Allow-Origin にて指定します。すべてのドメインからアクセスを許可する場合はワイルドカード “*” を指定します。

ブラウザがOFF設定になっている

ブラウザの問題により、表示がされないことがあります。これは各使用者の問題のため、制作サイドとしてはどうすることも出来ない問題ですが、変更方法について説明しておきます。

対処方法

・IEの場合
インターネットオプションから、［ユーザー補助］をクリックし、「Webページで指定されたフォントスタイルを使用しない」のチェックをはずします。外しましたらOKをクリックしてください。
sns

・Firefoxの場合
オプションから、［コンテンツ］タブをクリックし、「フォントと配色」の右にある［詳細設定］をクリックします。
snsicon02

詳細が表示されましたら、「Webページが指定したフォントを優先する」のチェックボックスをONにします。
sns03

プロトコルが混在している

「Google Web Fonts」では、フォントを指定する際に「http://～」から始まります。しかし、表示するサイトのURLが「https://～」で始まっていると、Webフォントが表示されません。

対処方法

単純にWebフォントを呼び出している箇所をhttp://からhttps://に置き換えるとフォントが表示されます。しかし、両方混在のまま使用したいという場合もあるかと思いますので、その時は、埋め込みリソースからプロトコル部分（HTTP、 ：HTTPS）を省略します。ちなみにこれはgoogleが推奨しているコーディングのやり方です。

Googleが推薦するHTMLとCSSのコーディング方法

src: url('https://design-plus1.com/fonts/');
/* ↓↓ */
src: url('//design-plus1.com/fonts/');

まとめ

今回はSNSボタンやWebフォントが表示されない時の原因や対処法について解説させていただきました。webフォントは非常に便利ですが、トラブルが起こった時にどうしたらいいのかと手間取ってしまうことがありますので、その際にはこちらを参考ください。また、TCDのソーシャルボタン機能に関しての記事はこちらにありますのでよければご覧下さい。
TCDテーマに新機能！ソーシャルボタン＆クイックタグのご紹介