複数のGoogle Fontsをまとめて読み込む

Google Fontsで複数のフォントをまとめて読み込めることを知らなかったのでメモ。

サンプルコード

以下のようにフォントを複数指定すると、フォントの指定がまとめられて表示されます。
今回はOswaldとCharmonmanで試しています。

フォントをバーティカルバー(|)で区切って指定するだけでいいようです。

head

<!-- それぞれ指定した場合 -->
<link href="https://fonts.googleapis.com/css?family=Charmonman" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<!-- まとめた場合 -->
<link href="https://fonts.googleapis.com/css?family=Charmonman|Oswald" rel="stylesheet">

Google Fontsをまとめて指定するデモページ1

フォントのウェイトを追加したい場合、「:」と「,」で区切ります。

head

<link href="https://fonts.googleapis.com/css?family=Charmonman:400,700|Oswald:400,700" rel="stylesheet">

Google Fontsをまとめて指定するデモページ2