前回の記事(カゴヤの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フォントを読み込めるようになっています。
この辺りも、デフォルトでやってくれるようになっているといいなあ。