複数のGoogleフォントをワンライナー(1行)で読み込む方法

GoogleのWebフォントは高品質なものばかりですし、無料とあって利用機会がとても多いと思います。

Google Fonts

とはいえ、いくつも読み込もうとすると <link> タグがフォントの数だけ増えて見た目的にも美しくありません。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto">
...

実はGoogleフォントは必要なフォントを1行で指定できるので、今日はその書き方を紹介したいと思います。

1行で複数のフォントを指定する

Googleフォントのダウンロードは次のように指定します。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=****">

最後の ?family=**** の部分にはフォント名を指定しますが、 | (パイプ)で区切って複数のフォントを指定することができます。

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

フォント名に半角スペースが入る場合は、+でつなぎます。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=EB+Garamond|Leckerli+One|Port+Lligat+Sans">

またウェイトも指定する場合は、セミコロンとカンマで指定します。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lato:400,700|Roboto:400,500,700">

更新情報はTwitterでも配信しています