Zenn
📝

Webフォントをやめるために、Puppeteerスクリプト書いて利用されているフォントを調べた

2023/03/15に公開
font
Puppeteer
tech

動機

Web アプリを制作する際に、Web フォントはデバイス間の差異を減らし、制作側の考慮を減らすことができます。

ただ、日本語の Web フォントは重い、というのはよく知られている問題です。アルファベットだけでなく、平仮名や漢字の種類が多く、その分フォントサイズが多いです。

それにより初期表示時の読み込みパフォーマンスが劣化することが指摘されています。

実際にはディスクのキャッシュや、分割読み込みされるので閲覧状況によってはあまり重いとは感じないかもしれません。しかし、モバイル環境等でローディング環境が貧弱な場合もあります。

では Web フォントをやめる場合、フォントの指定をどうするか、と考えるために実際に動いているサイトから参考例を取得するスクリプトを書きました。

書いたコード

import puppeteer from "puppeteer";
import { program } from "commander";

program.parse(process.argv);

const main = async (targetUrl: string) => {
  try {
    const url = new URL(targetUrl);
    const browser = await puppeteer.launch({ headless: true });
    const page = await browser.newPage();

    await page.goto(url.href);

    const fontFamily = await page.evaluate(() => {
      return getComputedStyle(document.body).fontFamily;
    });

    console.log(fontFamily);

    await browser.close();
  } catch (error) {
    console.error(error);
    return;
  }
};

main(program.args[0]);

ここで何をしているのかというと、Web API 標準のWindow.getComputedStyle()利用しています。

これは引数にとった要素に対して、どのようなスタイルが当たっているか調べることができるメソッドです。

https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle

またサイト全体のフォントはbodyタグかそれより上の要素で指定されることが多いため、要素はbodyを指定しています。

それを Puppeteer のpage.evaluateで実行しています。

実際のサイトで調べてみる

システム UI やユニバーサルな利用が想定されるサイトについて調べてみました。調べたのは 2023 年 3 月時点です。

サイト名 URL フォント
GitHub https://github.com/ -apple-system, "system-ui", "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
GCP コンソール https://console.cloud.google.com/ arial, sans-serif
DEV Community https://dev.to/ -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
Twitter https://twitter.com/ '"Times New Roman"'
デジタル庁 https://www.digital.go.jp/ "Noto Sans JP", -apple-system, blinkmacsystemfont, "Segoe UI", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", meiryo, sans-serif
freee https://www.freee.co.jp/ "Noto Sans JP", sans-serif
はてなブログ https://hatenablog.com/ -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif
Zenn https://zenn.dev/ -apple-system, "system-ui", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif, "Segoe UI Emoji"

外国と国内サービスを雑多に取り上げましたが、GitHub も Noto Sans を使っているのが意外でした。Twitter は逆に総称ファミリーすら指定がないので見る人の影響ありそうだと思います。

全体的な傾向としては-apple-system, "system-ui"がシステムフォントの指定として優先的に設定されています。その後は Windows の"Segoe UI"、日本語環境での閲覧が想定される場合は"Hiragino Kaku Gothic ProN" 、古い Windows 向けにMeiryoが指定されている模様です。
総称ファミリーには sans-serif を指定するのが無難そうです。

では実際にどのような指定をするか

これは難しい問題で、その程度厳密にデバイス間の見た目を揃えるか、によると思います。ある程度は諦めが必要かもしれません。
書き方によっては欧文・和文で適用されるフォントが異なるため違和感を感じさせるかもしれません。
そのため、個人的に作るものに関してはsans-serifだけ指定するか、下記ぐらいの設定になると思います。

body {
  font-family: -apple-system, "system-ui", "Hiragino Kaku Gothic ProN",
    sans-serif;
}

Web フォントは重いのですが、見た目の統一という問題を考えるとやっぱり楽ではあります。

余談

当初はスクリプトを使って Next.js と API Routes でサイトのフォントを調べる Web サービスを作りたかったのですが、Vercel の無料プランだとどう頑張ってもデプロイが無理なのと、Lambda 用の Chrome のバイナリがアップロード上限に引っかかったのと、デプロイしてもメモリが出てエラーになるので断念しました。

書いたコードはここに上げています。

https://github.com/ryokryok/font-analyze-script

Discussion