CSS

font-faceのURLは前から読む!Webフォント最適化

2017.11.07

キーボードとマウス

最近Webフォント周りの読み込みが遅いと感じていたのでWebフォント周りの記述を見直してみることにしました。と言うのもWebフォントが流行りだした情報の少ないときに勢いで実装したコードを未だに使いまわしていたからです。あれから結構な月日が流れていますし、Webフォントを取り巻く環境も変わってきています。

Webフォント周りのCSSの見直し

まず、計測です。実際にWebフォントでどれぐらいロスってるのか調べます。Safariの開発>Webインスペクタのネットワークタブで通信速度を調べます。そしてよくよく見てみるとOTFを読み込んでいました。

フォントの遅延は@font-faceの記述ミスが原因だった

お恥かしながらフォント周りの遅延は@font-faceの記述ミスが原因でした。正しくは下記のように指定しなくてはなりませんが、URLの指定が昇順降順逆になっていました。

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src:
  url('../fonts/Oswald-Medium.woff2') format('woff2'),
  url('../fonts/Oswald-Medium.woff') format('woff'),
  url('../fonts/Oswald-Medium.ttf') format('truetype'),
  url('../fonts/Oswald-Medium.eot');
}

CSSは上書きされるの勘違い

CSSのプロパティは上書きされますので@font-faceもそうだと勘違いしておりました。@font-faceは上書きではなく該当するフォントが見つかるまで読みに行くです。

Webフォントの最適化

ついでなのでWebフォントの最適化を行いました。今まではWOFF2は対応しておりませんでしたが、この機会にWOFF2にも対応することにしました。

WOFF2の変換

WOFF2への変換はサブセットの後に行います。
変換にはWOFFコンバーターを使います。MacユーザーならFontPlopなどもいいかもしれません。

font-displayの追加

まだ実装ブラウザが壊滅的ですがfont-displayプロパティを追加します。今回はswapを指定します。Webフォントが読み込まれるまでは別のフォントを読み込ませる記述です。

@font-faceに追記

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  src:
  url('../fonts/Oswald-Medium.woff2') format('woff2'),
  url('../fonts/Oswald-Medium.woff') format('woff'),
  url('../fonts/Oswald-Medium.ttf') format('truetype'),
  url('../fonts/Oswald-Medium.eot');
  font-display: swap;
}

フォントファミリーの記述

font-family: Oswald, sans-serif;

MIMEタイプの指定

WOFF2を新たに追加しましたのでMIMEタイプを追記します。

.htaccessの場合

.htaccessでWebフォントのMIMEタイプを指定する場合の記述を下記にまとめました。

<IfModule mime_module>
  AddType application/vnd.ms-fontobject .eot
  AddType application/x-font-ttf .ttf
  AddType application/x-font-opentype .otf
  AddType application/x-font-woff .woff
  AddType application/x-font-woff2 .woff2
  AddType image/svg+xml .svg
</IfModule>

Nginxの場合

Nginxの場合は.htaccessは使えませんのでmime.typesファイルに追記します。
詳しくは「KUSANAGI+NginxでWOFF2のMIMEタイプを設定する」でまとめています。

フォントまわりが改善された!

フォント周りの読み込みが改善されました!本来ならビフォーアフターを掲載するのでしょうが、OTFからWOFF2ですからね・・・・比較するまでもありません!
今回は見直してみて本当によかった!ってのが実感です。これだけに限らずソースコードのメンテナンスも適宜行った方がいいですよね。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する