カゴヤのVPSでアイコンWebフォント「fontawesome」を利用する

前回の記事（カゴヤのVPSでwordpressの設定をするときのハマりポイント）を書きましたが、これだけだとWebフォントが利用できませんでした。
不足しているのは、nginxの設定です。

Webフォントが利用できていない場合

Webフォントが利用できていないと、こんな感じになります。

ブラウザのコンソール

画面上の表示（アイコンが読めていないところは全て□になっています）

設定方法

2つのファイルを設定する必要があります。

mime.types

カゴヤのVPSのwordpressのパックでは、/etc/nginx/mime.typesに配置されています。
ここに、読み込めないWebフォントの拡張子を追加してあげる必要があります。

types {
    application/x-font-ttf                ttf;
    font/opentype                         otf;

  (snip)

    application/font-woff                 woff woff2;

  (snip)

}   

• 2行目、3行目のttf、otfは、該当のコンテンツタイプがないので追加してください
• 7行目のwoff2の記述が不足しているので、半角スペースで区切ってwoff2を追加してください

wordpress.conf

同様に、/etc/nginx/conf.d/wordpress.confに配置されています。
下記のコードを追加してください。

    location ~* \.(eot|otf|ttf|woff|woff2)$ {
        add_header  Access-Control-Allow-Origin *;
    }

これで、nginxを再起動したらWebフォントを読み込めるようになっています。

この辺りも、デフォルトでやってくれるようになっているといいなあ。