Memo

No.222
フォントまわりのふぉんとに細かい話

Webフォント（GoogleFonts）の使用により、フォント表示時のチラつきとサイト全体の重さが気になっていたので対策した話。
欧文フォントだけ使っている時はさほど気になりませんでしたが、日本語フォントをどうしても使いたかったので頑張りました。

Googleフォントの外部読み込みをやめて自サーバーから呼び出すようにした
GoogleFontsからフォントをダウンロード→woff2に変換→自サーバーにアップロードしてCSSの@font-faceで読み込む。

これにより初回アクセス時の読み込みは（たぶん）重くなってしまいましたが、以降のページ遷移はサクサクになったはず。
特にキャッシュを拒否していない環境であれば一度読み込んだフォントは1年間キャッシュされます。
外部からの読み込みだとページ遷移するたびに、端末標準の代替フォントから指定したフォントに切り替わる瞬間の画面のチラつきがありましたがそれもなくなりました。

ローカルにフォントがインストールされていれば読み込むようにした
当サイトでは日本語フォントにKosugi Maruを指定していますが、閲覧者の端末にKosugi Maruがインストールされている場合はそちらを優先して読み込む設定にしました。その場合は問答無用で超サクサクです。

おそらくこのサイトへのアクセスの99%は自分だと思うので、とりあえず自分のPCからKosugiMaruで爆速＆チラつき無しで表示できるようになり大満足。

なおヒラギノ角ゴがインストールされている端末ではそちらが優先されます。
これは私がiPadで自サイトを見る時に、KosugiMaruがなんかしっくりこなかったからです；

タイトルロゴがちらつかないようにした
トップページの筆記体風のロゴもWebフォントなのですが、読み込み完了するまで代替フォントとして端末標準のクソデカゴシック体が一瞬チラつくのが気になっていました。

@font-face {
  …中略…
  font-display:auto;
}
ロゴに使用しているフォントではfont-displayを上記のように設定することで、代替フォントを表示せず、指定フォントで読み込み完了するまでは何も表示しないように変更。

あとはフォントとは関係のない本当に細かい余談ですけど、トップ絵とバナーサンプル画像は文字列変換して読み込み時の一瞬のガク付きが出ないようにしました。

line

【参考】



#高速化 #手打ちサイト #カスタマイズ
サイト運営メモべらべら更新履歴【管理用非表示カテゴリ】