[web]Googleフォントの高速化手引

webフォントの実用性が上がる。

通常の導入

Googleフォントのページで使用したいフォントを選んで、バリエーションがある場合はさらにそこから選んでwebフォントタグを生成する。

Google Fonts
Making the web more beautiful, fast, and open through great typography

これの全種類を使う場合はこうなる。

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap" rel="stylesheet">

<head>に挿入すれば、後はcssで適用するだけ。

body{
    font-family: 'Shippori Mincho', serif;
}

font-weightを指定すればバリエーションを選ぶことができる。

css上で読ませたい場合、@importも用意されてるのでコピペで済んでしまう。楽ちん。

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');

で、webフォントを使用して組み上げてブラウザで確認したとき、フォントは遅れて反映されるので、読み込み時に一瞬デフォルトのフォントが表示される。

うざったくてダサくてどうにかなんないの、っていう話。

結論

rel=”preload”を使う。

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preload" as="font" href="https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap" rel="stylesheet">

「 rel=”preload” 」だけでも効いちゃったけど、他にも記述する作法があるっぽい。preloadしたい要素によってasの中身を書き換える感じ。詳細はこの記事がわかりやすかった。

サイト高速化に必須の link rel=preload とは?(使い方とサンプルHTML・CSS) | 株式会社ウェブ企画パートナーズ

実際に作ったのがこれ。

Document

文句なしですね。

@importではどうなの

cssから別のcssファイルを@importするのはそもそもが軽量だから問題にならないんだけど、フォントを@importすると<head>で素の状態で読ませたときと同じ状態になる。@importに対して高速化する手段はないっぽい。

@importしてるcssファイルをpreloadすれば、ってのをやってみたけど無理だった。

Document

キャッシュが効いてるのか再読み込み時は問題ないけど、初回は一瞬ブレる。

<head>への記述は行数が増えるから好きじゃないんだけど、webフォントは諦めて<head>に入れたほうがいいんじゃないかな。

自鯖だったらどうか

フォントをwoff形式で用意できたら自鯖にwebフォントを設置できる。

外部サーバーだからダメなんじゃないの?って考えることもある。だけどやってることは変わらないんで、なんなら配布してるサービス元のほうがそんじょそこらのサーバーより強いんで、逆に遅くなる可能性すらある。

ファイルの設置場所は関係ないということが分かる。どんまい。

参考

Googleフォントを高速で読み込む!非同期で読み込む方法とpreload記述の方法について紹介。 - もぐもぐ食べるおいしいwebデザイン。 - もぐでざ
コーディングとWebデザインが好きな人間がいろいろやっているブログです。絵日記も書いているよ。誰かに「いいな」と思ってもらえるようにがんばるよ!
Google Font利用時の表示速度が遅い対策
使いやすくて便利なWebフォントの代表格「GoogleFont」ですが、フォントはどうしたって結構なデータサイズなので、PageSpeedInsightsなどで表示速度をテストしてみると、「レンダリング(ブラウザがページを表示させるためにデ

コメント

タイトルとURLをコピーしました