HTML エラーを出さず複数の Google Fonts を 1 つの link タグで読み込み

Akira

福岡在住の Web デザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

Google Fonts を 2 つ以上読み込む場合は、| を使ってねと Google Fonts のガイドは推奨しています。

例えば Bellefair と Roboto を読み込む時は、| で 2 つのフォント名を区切り指定します。

<link href="https://fonts.googleapis.com/css?family=Bellefair|Roboto&display=swap" rel="stylesheet">

これで 1 つの <link> タグで、2 つの Google Fonts を読み込めます。

もちろん 3 つ以上も可能。

<link href="https://fonts.googleapis.com/css?family=Bellefair|Joti+One|Roboto&display=swap" rel="stylesheet">

ただ、| を使うと、W3C の HTML 文法チェッカーで下記のエラーが出ます。

Error: Bad value https://fonts.googleapis.com/css?family=Bellefair|Roboto&display=swap for attribute href on element link: Illegal character in query: | is not allowed.

| は、許可されていない不正な文字だとおっしゃっている。

この HTML 文法エラーを回避するには、| ではなく URL エンコードした %7C を使います。

<link href="https://fonts.googleapis.com/css?family=Bellefair%7CRoboto&display=swap" rel="stylesheet">

これで 1 つの <link> タグで、複数の Google Fonts を HTML 文法エラーを出さずに読み込めます。

気をつけたいのが、Google Fonts の公式サイトで 2 つ以上のフォントを選んだ時に | を使った <link> タグを生成してくること。

| が使われた <link> タグ

そのまま使うと、文法エラーの罠に落ちちゃいます。

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。