Google Fontsのバリデートエラーについて

Expanse - FC2ブログテンプレート

Expanseテンプレートはレスポンシブウェブデザインです。 パソコン・タブレット・スマートフォン等全デバイス間共通でお使いいただけます。 「スマートフォン版の表示設定」を「無効にする」に設定してご利用ください。 設定ページ...

vanillaice000.blog.fc2.com

Google Fontsの発行コード

現在発行されるコードは以下のような内容です。今後また変化があるかもしれませんので、2023年5月30日時点です。サンプルとして Roboto を指定しています。

<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=Roboto&display=swap" rel="stylesheet">

3つのファイルがありますが最初の2つは問題ないので無視してOKです。問題は3つめファイルの赤い部分 & これがエラーの原因です。これはいわゆる パラメータ と呼ばれるもので、パラメータとはURL後方の ? を含みそれ以降の文字列を指します。1つめのパラメータを ? で、続く2つ目以降のパラメータは & で繋いでいきます。

別のサンプルとしてYouTubeで発行される埋め込みコードは以下のようなものです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?controls=0&rel=0&loop=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

緑の部位が3つあり、最初は ? 2つ目が & で3つ目が & 全部で3種のパラメータが連結されています。
* 参考までに『コントロールバー非表示』『関連動画非表示』『ループ再生』を意味しています。

パラメータというのはこういう法則なので、覚えておくと役に立つかもしれません。1つ目ハテナ、2つ目からはアンド。

なのですが、この & がちょっと曲者でして。結論から言うとこのアンドの記号は

&

と書かないとバリデートでエラー判定されます。URL内文字列なので、エスケープ しなさい、という意味あいです。

先程のGoogle Fontsのファイルは以下のように書けばバリデートエラーを避けられます。

<link href="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap" rel="stylesheet">

直さなければいけないのか

「Googleが発行するコードをそのまま利用しているのにエラーとかなんなの。直さなきゃいけないの？」という点ですが、正直よほどのことが無い限り直さなくとも正常に機能します。そもそもこちとら言われた通りに記しとるやんけ、とか思うし。とはいえ事実関係が理解できた場合は、直した方が精神衛生の面でも良いのではないかと。

これまで気をつけていたんですが、Expanse申請時に失念していましたので上書き修正しておきました。既にご利用中の方は &display=swap で検索すると2箇所ありますので、いずれも &display=swap に自主修正頂ければ幸いです。

Google Fonts旧コード

過去のコードは以下のようなものでした。この場合は 複数フォント指定 を行った時のみエラーが生じます。

<link href="https://fonts.googleapis.com/css?family=Roboto|Open+Sans" rel="stylesheet">

Robot と Open Sans を指定しています。複数指定する場合は | このパイプラインという記号を用いますが、これがエラーの原因になります。避けるには

%7C

と記します。

<link href="https://fonts.googleapis.com/css?family=Roboto%7cOpen+Sans" rel="stylesheet">

で、この旧コードなんですけども、Google FontsのAPIがバージョン1から2に変更されていますので、余力があれば新しい内容に書き換えた方が良いと思います。大きな違いは swap と呼ばれる概念です。ちょっとややこしいので次章で説明します。

swapかFOUTか

本章は本記事の主旨から外れる余談です。

swap とは日本語で『交換する』ことを意味します。代替フォントとwebフォントを文字通り交換します。FOUT とは Flash of Unstyled Text の略で、webフォントが読み込まれるまでの間は別のフォントで表示されており、読み込まれた時点でフォントが書き換わるのでパチパチっとなんか明滅するような嫌な表示感が出てしまう問題を指します。これまで発展を遂げてきたwebフォントについて、その問題点の簡単な歴史は以下の通り。

1. 読み込みが遅い
2. データ取得に失敗したらどうする
3. ちらつき現象がウザい(FOUT)
4. FOUT対策したらデータ取得まで何も表示されないが良いのか

個々の問題点が複雑に絡み合っていますがざっと説明すると、①については preconnect や preload などの手法で『できるだけ早くデータを取りに行く』という形でもってフォローされるようになってきています。

②については 代替フォント表示 が推奨されています。即ちそれが swap です。データの取得に失敗した場合は代替フォントがそのまま表示されますので、テキストが無い・読めない といった状況を回避できます。

③はswapを用いれば必ず起こります。もっと言えばフォントの形状, 細さ(太さ), 文字間隔 などはまちまちですから、代替フォントとwebフォントのそれらの差異が大きければ大きいほど CLS (Cumulative Layout Shift) の可能性が高くなります。このあたりも様々なアプローチが行われていますが、現状ではこれが完璧といった方法は見つかっていません。

④では逆にFOUTを無くそうと試みると、結局は代替フォントを『可視状態にしない』という方法を取ることになるわけですから、swapの概念と衝突します。

正直まぁwebフォントの問題点については未解決と言って良いと思います。それでも現段階ではこれがベストであろうという方法をExpanseで採用しています。『webフォントを利用しない』というのが最適解ではありますが、それは問題に向き合っていることにはならない(笑)

まとめ

というわけで、Google Fontsのバリデートエラーについて、URLとしての文字列に記号が含まれる場合はエスケープあるいはエンコードが必要になることがあるよ、という説明でした。というか、バリデータが急に指摘し出したということでもありますが ^^;

FC2ブロガーのみなさんが気をつけるとしたら、『SNSリンクなど』『YouTubeパラメータ』『各種プラグインパラメータ』ぐらいかな、と思います。テンプレートの方は先日告知したようにメンテナンスを行いますので、その際に本件に掛かる内容を再度チェックしていきます。