このブログではWebフォントを使って、環境によらずある程度使われるフォントをそろえるようにしています。
Webフォントというと一般的にはGoogle FontsやTypekitがよく使われます。headタグの中に各サービスが提供するタグをコピペするだけで使えるのでとてもお手軽なのですが、いくつか欠点もあります。

• 常に最新バージョンのフォントに自動的に更新されるため、フォント側に大きな変更があった場合にデザインが崩れる場合がある
• リクエストするサーバーの数が1つ増える
• 訪問者がGoogleやAdobeによってトラッキングされるためプライバシー的によくない

これらの欠点を回避するのはわりと簡単で、普通にフォントを配置してスタイルシートで呼べばよいのです。

@font-face {
  font-family: 'Inter';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url("Inter-Regular.woff2") format("woff2"),
       url("Inter-Regular.woff") format("woff");
}

しかし自分でこういうスタイルを1つ1つ書いていくのはちょっと大変。
Gatsbyのドキュメントを眺めていたところ「Google Fontsのフォントを使うなら、Fontsourceを使うのが早い」と書かれていたので、使ってみることにしました。

お目当てのフォントをFontsource Search Directoryで探して、サイト側にインストールします。

npm i @fontsource/montserrat

適宜importします。Gatsbyで構築しているサイトならsrc/components/layout.tsxとかでしょうか。何も指定しなければウェイトは400のものが読み込まれるので、たとえば700とかを使うならこのように指定できます。

import "@fontsource/inter/400.css"
import "@fontsource/inter/700.css"
import "@fontsource/noto-sans-jp/400.css"
import "@fontsource/noto-sans-jp/700.css"
import "@fontsource/montserrat/700.css"
import "@fontsource/fira-code"

あとはCSSで指定してやればよいでしょう。

body {
    line-height: 1.75;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-weight: 400;
}
 
h1, h2, h3, h4, h5, h6 {
    line-height: 1.20;
    font-family: 'Montserrat', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    border: 0;
}

重たい日本語フォントであるNoto Sans JPも、ある程度分割されており実際の読み込み時にはそこそこのサイズに抑えられているようです。NPMパッケージが呼び出せる環境下ではGoogle Fontsよりお手軽なFontsource、覚えておいて損はなさそうです。