この記事は最終更新日から2年以上経過しています。
Google Fontsを複数指定して読み込む方法
公開日：
更新日：
こんにちは。ましじめの田村です。
Google Fontsを使用する場合に複数使用したいケースがあったとします。
Google Fonts
この場合、個別に読み込むと次のようになると思います。
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">1つにまとめたい場合| で区切ることでまとめて指定することが可能です。
<link href="https://fonts.googleapis.com/css?family=Roboto|Noto+Sans+JP&display=swap" rel="stylesheet">さらに:, iを使用することでウェイト、イタリック体を指定することも可能です。
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400i|Noto+Sans+JP|Material+Icons&display=swap" rel="stylesheet">Google Fontsを読み込む場合に参考にしてみてください。