カッコいいし、簡単に設定できるけど遅い Google Fonts
ここで、楽々Google Fonts使用〜と適用したら、描写がめちゃめちゃ遅くなった。特に、スマホ。これは使えん！と、いろいろ調べてみる。
nginx 専用だよー
フォントダウンロードするよ!
まず、ここから、フォントそのものをダウンロードする。自分は、Noto Sans Japaneseを使うよ!
解凍して、サーバにアップするよ!
fonts ってディレクトリを作成して、解凍したファイルを全部アップするよ!
CSSのfontsロード部分を置換するよ!
http://fonts.googleapis.com/earlyaccess/notosansjapanese.css をダウンロードして、
//fonts.gstatic.com/ea/notosansjapanese/v5/
を
./font/
に置換するよ!パスは各自調整してね! notosansjapanese.css をサーバにアップしてね!
CSSの読み込みファイルを変更するよ!
/* @import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css); */
@import url(./notosansjapanese.css);
とかするよ!
nginx のmime.types 設定をするよ!
font/ttf ttf;
font/opentype otf;
application/font-woff woff;
application/vnd.ms-fontobject eot;
eotが既にある場合は、サクッと削除してね!
nginx の Gzip 設定をするよ!
gzip_types [...] font/ttf font/opentype application/vnd.ms-fontobject;
nginx で、ブラウザキャッシュ時間を1年にするよ
location ~* \.(eot|ttf|woff)$ {
expires 1y;
log_not_found off;
}
nginx をリスタートするよ!
nginx -t
で、一応設定を確認して、リスタートしてね!
どうっすか!?
気持ち早くなったような。
間違えていたら、コメントをくださーい。