Google Fonts 複数指定の書き方

Google Fonts 複数指定の書き方

webのあれこれ
2018/02/16 0
vanillaice (Akira)
vanillaice (Akira)
Instruction Font HTML トラブル対処 Validation

Googleがホストしているwebフォントライブラリで複数の指定を行うためのtipsです。

Google Fonts

Making the web more beautiful, fast, and open through great typography

別段難しいことではないので簡潔に。
まずはよくある間違い(というか非効率な内容)

<link href="https://fonts.googleapis.com/css?family=Kavivanar" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mukta+Mahee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

これ非常に非効率ですね (´・ω・`)
リクエストが4回発生しています。
Google宅へは一度伺って全部頂いてくれば良いのでこうです ↓

<link href="https://fonts.googleapis.com/css?family=Kavivanar%7CMukta+Mahee%7COpen+Sans%7CRoboto" rel="stylesheet">

大文字の %7C で繋ぎます。
大文字 であって 全角ではありませんので注意。
| でも良いんですが、バリデート時に「エンコードしろ」って言われてウザいので回避。

後からフォントを足した場合にやってしまいがちですが、追加時は リンクを増やさない ようにしましょう。
webフォントを利用するだけでも負荷は増しますので、それ以上ページが重たくならないようリクエストは最小限に抑える、と。
そゆことですね (´・ω・`)

えと。webフォントの使いすぎはページ重たくなりますよ。
あまり意識せず使っている方はそのあたり重々理解した上でどうぞ。
最後に「必要な文字だけ」指定する場合は以下の通り。

<link href="https://fonts.googleapis.com/css?family=Roboto&amp;text=ABCD" rel="stylesheet">

&amp; でtextパラメータを繋ぎ、必要なアルファベットもしくは数字を連続で入れます。

 0

There are no comments yet.

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

webのあれこれ