Gatsbyで一部の要素のみにGoogle Fontsを適用させたい

Question

前提・実現したいこと

GatsbyでGoogle Fontsを使用したいです。
typography.jsやTypefaceを試したのですが、一部(例：h2のみなど)に適用させることは出来ず、全体に適用されてしまいダメでした。
font-familyは直接書いてるとめんどくさいので、cssファイルに記述して一括で反映させたいです。
折角、Gatsbyを使っているのでレスポンスの速度も速く、Lighthouseで満点が取れるような方法で適用させたいです。

試したこと

Typefaceでnoto-serif-jpをいれ、gatsby-browser.jsでフォントを読み込み、該当するセレクターにfontfamilyで書き込んだのですが、反映されませんでした。

何かいい方法はないでしょうか？
ご教示よろしくお願いいたします。

ちなみに使いたいフォントは Noto Serif JPとKosugiです。

Comments

[showkit]

質問の意図を間違えていたらごめんなさい。
例えば、h2 ならば h2 { font-family: Noto Serif JP; } とかってことではないのですか？

[Nero1129]

そうなのですが、普通のHTMLみたいにlinkを埋め込むとレスポンスが悪くなってしまうので、typography.jsなどを用いようとしたのですが、適用させると、全体へ反映されてしまい普通はメイリオで良い部分まで違うfontfamilyが効いてしまうので質問してみました。