1. 本ページの目的
本ページに、Google Fonts を使ってみる。
2. 導入手順
(1) Browse Fonts - Google Fonts にアクセスする。
(2) 今回は「RocknRoll One」を利用することとし、該当するフォントをクリックする。
(3) 同ページ上でスタイルを選択すると、利用方法が表示される。
(4) 実際の使い方としては、<link> タグを記述して、フォントを適用したい要素を表すセレクタに対して、font-family プロパティを指定するだけ。
<link> タグ
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
display=swapというパラメータは、font-displayプロパティの値として 'swap' を指定にすることを意味している。
3. デモ
わたくしといふ現象は 仮定された有機交流電燈の ひとつの青い照明です （あらゆる透明な幽霊の複合体） 風景やみんなといつしよに せはしくせはしく明滅しながら いかにもたしかにともりつづける 因果交流電燈の ひとつの青い照明です （ひかりはたもち その電燈は失はれ） これらは二十二箇月の 過去とかんずる方角から 紙と鉱質インクをつらね （すべてわたくしと明滅し みんなが同時に感ずるもの） ここまでたもちつゞけられた かげとひかりのひとくさりづつ そのとほりの心象スケツチです
「春と修羅（宮沢賢治）」より引用
4. パフォーマンス
Chrome DevTools [Performance]
CPU:4x slowdown
- いろいろなリソースは読み込ませずに実行した。
Chrome DevTools [Lighthouse]
Device:Mobile
5. メモ
- 1つの Google Font は複数のフォントファイルに分割されている。表示に必要な文字を含むフォントファイルだけが自動で判別されダウンロードされる。なので、ページのパフォーマンスは悪くならない。