「Google Fonts+日本語」をAMPサイトに導入する

2020-05-19

(LastUpdated: 2020-05-19)

スピード重視はしているけど、でも・・・ビジュアルにこだわりたい! そんな方、多いと思います。 僕もそっちのタイプです。

ビジュアルといってもいろんな要素があると思うのですが、今回は web font にフォーカスを。 結論から言うと、AMPのサイトでもweb fontの使用は可能 です!

[[ toc ]]

Google Fonts「アーリーアクセス」

amp brand logo 素晴らしいサービスのgoogle fontを使わせていただくことにしました。 簡単に使いやすくて、いつもお世話になってます。 Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access

日本語のweb fontの問題点にアプローチする、Google Fonts + 日本語 早期アクセス

日本語のweb fontを使うというのは、ビジュアルは面白くなるのですが、 実はかなり重くて実用に耐えない という問題が立ちはだかります。 それらの問題を解決すべく取り組んでいるのが、Google Fonts + 日本語 早期アクセス です。

そもそも、AMPでつかえるの?web fontって。

「AMPって外部CSSは読み込めないんじゃなかったっけ?」 と、心配される方もいるかと思いますが、 ホワイトリストされているサイトからの読み込みはOK です。 Add custom fonts – AMP

htmlの書き方

Headのなかで呼び出すだけという手軽さ。 アーリーアクセスのサイトで、使い方を表示してくれるので、迷うことはないでしょう。

  <link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="preload" as="style" />
  <link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" />

次はCSS側のfont-familyに指定するだけ。

  body {
    background: #fff;
    color: #4a4a4a;
    font-family: 'Sawarabi Mincho',-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Arial,sans-serif;
  }

preloadについてはまた別の機会に。

ちなみに一行めは preload の指定です。 これについては、今のところあまり詳しくないので、別の記事でもう少し詳しく調べてみたいと思います。 主な狙いとしては、表示パフォーマンスの向上 です。

想像以上に、ロードがはやい

想像していた以上にロードが早い と感じました。 以前にnotofontを使ったことがあるのですが、むちゃくちゃ遅いイメージがありました。

今回の実装で、印象が変わりました。 なんと、4G環境でもあまり気にならないレベル。 今まで重さが気になっていた人は、試す価値があると思います。

スピード改善のため使用をやめた

lightHouseのスコアを見て、さらなるスピード改善を図るべく、設定を解除しました。 計測してみると、パフォーマンス数値でネックになっていることが明白でした。

実際の体感としてはさほど変わらないのですが、通信環境によるのでしょう。 実装解除したところ、数値はかなり上昇。 一旦、無い状態で様子をみたいと思います。

CSSでwebフォントの遅延ロード

このサイトのタイトル部分にwebフォントを使っています。 遅延ロードとは、

  • webフォントがロードが終わるまではデフォルトのフォントを使用し、
  • ロードが完了次第そのフォントを適用する

というものです。 重いwebフォントのロードが終わるまで待つ必要がなくなるため、初期表示が早くなります。

font-display: swap;

font-faceを指定している箇所に、font-display: swap; とプロパティを追加するだけでOK。

  @font-face {
    font-display: swap;
  }

詳しくはこちら。 font-display - CSS: カスケーディングスタイルシート | MDN

これで初期ロード時間を減らし、体感スピードを上げることができます。 ビジュアルを犠牲を最小限に、リッチなUXに一役買ってくれることでしょう👏

まとめ:webフォントを使うならコンセプトを明確に

webフォントのリッチなビジュアル体験は、手放しがたいもの。 気軽に実装できて、その効果も抜群ですから、狙いがある場合には大きな力を発揮します。

ただ、ページスピードのパフォーマンスに影響してしまうことは間違いありません。 導入をするかどうかを分つものは、サイトのコンセプトです。

このサイトの場合はAMPで構築していることもあり、当初から「表示スピードの追求」というコンセプトでした。 よって、日本語のwebフォントは外すことにしました。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。