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

複数の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">

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer-app.comの自主開発や上越TechMeetupの主催などを行っています。

プロフィール