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

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

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

  1. Google Fonts + Japanese Early Access
  2. htmlの書き方
  3. 想像以上に、はやい
  4. 使うのやめました・・・
  5. CSSでフォントの遅延ロードを実現する方法

どうやらpreloadではなく、cssで設定してやる必要があったみたいです。
一番下に追記しました。

Google Fonts + Japanese Early Access

素晴らしいサービスのgoogle fontを使わせていただくことにしました。
簡単に使いやすくて、いつもお世話になってます。

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

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

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

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

つまり、google fontsはOK。

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のスコアを見て、設定を解除しました。
一時は導入していたのですが、パフォーマンス数値が気になりました。

やっぱり重かった・・・

実際の体感としては重さは感じなかったものの、lighthouseをスコアに重きを置くことにしました。
解除したところ、数値はかなり上昇したので一旦、これでOKということにしました。

適材適所!あとコンセプト!

今回はこのサイトの「表示スピードの追求」というコンセプトと合いませんでしたが、体感的には問題があると感じないレベルでした。
ビジュアルをフルに活かした訴求で、テイストが合うのであれば、使わない手はないです。

別のプロジェクトで導入してみたいと思いました。

CSSでフォントの遅延ロードを実現する方法

このサイトのタイトル部分にwebフォントを使っています。
そこで、遅延ロードするCSSの設定をしてみたところ、うまく動きました。

ここで言う遅延ロードとは、webフォントがロードが終わるまではデフォルトのフォントを使用し、ロードが完了次第そのフォントを適用するというものです。
これにより、ロードの完了を待たずしてコンテンツを表示することができるという訳です。

webフォントを指定している箇所に、以下のプロパティを追加するだけでOK。

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

詳しくはこちら。

速度の速さのおかげで、ビジュアルを犠牲にせずにUXの向上を狙えるのが素晴らしい👏
この方法を使えば、このサイトの本文も、ロード時間を気にすることなくwebフォントを適用できるようになりました。

#amp
#google
#font
ChaosBoy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。