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

2020-06-11

(LastUpdated: 2020-06-11)

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

ビジュアルといってもいろんな要素があると思うのですが、今回は 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フォントは外すことにしました。