Google Fonts 複数指定の書き方

本記事は執筆から1年以上経過しています。現在のGoogle Fontsは別の書式になっています。

Google Fonts

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

fonts.google.com

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

<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">

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