Lon Sagisawa

fonts image

FontsourceでWebフォントをNPMパッケージとして扱う

2021年02月28日

このブログではWebフォントを使って、環境によらずある程度使われるフォントをそろえるようにしています。
Webフォントというと一般的にはGoogle FontsTypekitがよく使われます。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、覚えておいて損はなさそうです。

logo

Lon Sagisawa

福井県在住の1995年生まれ男性。ゲームしたり写真を撮ったりコードを書いたりして過ごしています。日本国内でお仕事募集中。

Mastodon / GitHub / Twitter / Twitch