Adjust google font

[RickCogley]

Google Font を変更したいなら、コンフィグでできる。

設定Area:
https://github.com/juliecogley/julie_portfolio/blob/main/_config.ts#L34

書き込むCSSファイル：
https://github.com/juliecogley/julie_portfolio/blob/main/_config.ts#L36

このセクションに、GFのURLを指定する：
https://github.com/juliecogley/julie_portfolio/blob/main/_config.ts#L39
名前を付けて、CSSが自動的に書き込まれる。たとえば、display (アクセント) や text (一般文字)として名付ける。
名付けるって、何故やるかと言うと、あとから変更したら、いちいちHTML買えなくて済むから、やる。

Textの場合、こちらにGFのURLを。
https://github.com/juliecogley/julie_portfolio/blob/main/_config.ts#L42

設定のSubsetsは、どのUnicode Subsetを使うか。日本語のフォントは時々ベトナム語とかロシア語入っているので、こうやって、ほしいSubsetを指定することができます。...[2],[3],... は、Unicodeの部分という意味。沢山あるけど仕方無い。
https://github.com/juliecogley/julie_portfolio/blob/main/_config.ts#L35

GF見ると、チョイスは沢山：
https://fonts.google.com/?script=Jpan

例えば、Zen Kaku Gothic New にしたい、として、
https://fonts.google.com/specimen/Zen+Kaku+Gothic+New?script=Jpan
から、Get Fontから、Embed Code。ほしいWeight撰んで、URLをコピーして、Configに入れる。下記スクショみて。

https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap

Main　CSSファイルの下に、Configの文字列を書けば、Lumeがビルジ時そこに、Google FontのCSSルールを書いてくれる。
https://github.com/juliecogley/julie_portfolio/blob/main/src/styles.css#L371

出来上がったCSSを見ないといけないので、ビルド後 _site/styles.css 見ると、あるはず。下記スクショみて。

で、CSSで使える。
タグ html にて、Weight 400（Normal）
https://github.com/juliecogley/julie_portfolio/blob/main/src/styles.css#L3

また、各 <div> で使えるように、.text-100 など、指定する。下記スクショみて。

で、HTMLで使う。例えば：
https://github.com/juliecogley/julie_portfolio/blob/main/src/_includes/templates/nav.vto#L4

[RickCogley]

これ、やってみて、理解できたら、珠里ちゃんがわかる形でWikiに書いてね。