Google Fonts を使う(外部リンク利用)

1. 本ページの目的

本ページに、Google Fonts を使ってみる。

2. 導入手順

(1) Browse Fonts - Google Fonts にアクセスする。

(2) 今回は「RocknRoll One」を利用することとし、該当するフォントをクリックする。

(3) 同ページ上でスタイルを選択すると、利用方法が表示される。

(4) 実際の使い方としては、<link> タグを記述して、フォントを適用したい要素を表すセレクタに対して、font-family プロパティを指定するだけ。

<link> タグ

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">

3. デモ

わたくしといふ現象は
仮定された有機交流電燈の
ひとつの青い照明です
(あらゆる透明な幽霊の複合体)
風景やみんなといつしよに
せはしくせはしく明滅しながら
いかにもたしかにともりつづける
因果交流電燈の
ひとつの青い照明です
(ひかりはたもち その電燈は失はれ)


これらは二十二箇月の
過去とかんずる方角から
紙と鉱質インクをつらね
(すべてわたくしと明滅し
 みんなが同時に感ずるもの)
ここまでたもちつゞけられた
かげとひかりのひとくさりづつ
そのとほりの心象スケツチです

「春と修羅(宮沢賢治)」より引用

4. パフォーマンス

Chrome DevTools [Performance]

CPU:4x slowdow

Chrome DevTools [Lighthouse]

Device:Mobile

5. 参考