HTML エラーなしで複数の Google Fonts を 1つの link タグで読み込み

2つ以上のGoogle Fontsを1つのlinkタグで読み込む正しい方法

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

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

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

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

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

HTTP リクエストが減って、サイトが遅くならない読み込み方法。

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

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

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

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

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

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

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

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

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

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