Google Fonts 複数指定の書き方

Google Fonts 複数指定の書き方

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

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

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

Google Fonts

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パラメータを繋ぎ、必要なアルファベットもしくは数字を連続で入れます。

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)