
Googleがホストしているwebフォントライブラリで複数の指定を行うためのtipsです。
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&text=ABCD" rel="stylesheet">
& でtextパラメータを繋ぎ、必要なアルファベットもしくは数字を連続で入れます。
関連記事
- オフィシャルブログで絵文字の乱用はどうかと思う2018/02/28
- Font Awesome5にアップグレードした結果困ったことになっている方へ2018/02/25
- アイコンは【Font Awesome】だけじゃない 超便利【Icongram】2018/02/25
- ページの純粋な表示速度とスピードスコア判定結果は全く同じわけではない2018/02/17
- エキサイトブログの常時SSL化説明がわかりやすい2018/02/12
- Font Awesome5の使い方2018/02/11
- html5.2ではstyle要素をbody内に書けるようになりました2018/02/09
- 「タグを作る」という表現は超おかしいという話し2018/02/08