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

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年2月
 123
45678910
11121314151617
18192021222324
2526272829