https://simadzu.hatenablog.com/entry/google-fonts-woff2

はてなロゴ

このブログでは、日付を日めくりカレンダー風に表示し、そのフォントに「sans-serif」を指定しているのですが、フォントによってカレンダーの大きさが少し変わってしまいます。
そこで、日付のフォントをWebフォントのGoogle Fontsにしてみました。

日付に必要なのは数字だけなので、日本語フォントではなく欧文フォント（Work Sans）を使います。ブログのhead部分（設定→詳細設定→<head>要素にメタデータを追加）に次のとおりフォントを埋め込みます。

HTML
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap" rel="stylesheet" />

セカヤサブログ｜google fontsの使い方【コピペするだけ】

このままだとすべての文字を読み込むことになるので、使う文字だけを読み込みます。
（使う文字が少ないので「display=swap」は削除しました）

HTML
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&text=0123456789/" rel="stylesheet" />

Web-saku｜Google Fontsで必要な文字だけを読み込むようにして軽量化する方法
 Qiita（@unotovive）｜特定の文字だけフォントが変えたい? @font-faceを定義しよう！

上記のURLを開くと次のようなスタイルシートが表示されるので、上記のURLの代わりに「<style> ～ </style>」で囲んでhead部分に直接入力します。

HTML
<style>
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/l/font?kit=QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQNi0bqIjtEhP5dPVoE2n_&skey=a19f1b3d756da88c&v=v18) format('woff2');
}
</style>

さらに上記URLを開くと「font.woff2」がダウンロードできるので、Dropboxに保存し、フォントのURL（直リンク）を取得、上記の代わりにhead部分に入力します。

HTML
<style>
@font-face {
    font-family: 'Work Sans';
    font-style: normal;
    font-weight: 600;
    src: url(https://dl.dropboxusercontent.com/s/qtklcnxm61olpqj/font.woff2) format("woff2");
}
</style>

TASK_BLOG｜【ページロード高速化】Google Fontsをサーバーにアップする方法

PageSpeed Insightsで確認したところ、Dropboxからフォントを読み込むより、Googleから読み込むほうが（体感的にも）速かったので、最終的には次のようになりました。
head部分にコードを入力します。

HTML
<link rel="preload" href="https://fonts.gstatic.com/l/font?kit=QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQNi0bqIjtEhP5dPVoE2n_&skey=a19f1b3d756da88c&v=v18" as="font" type="font/woff2" crossorigin />
<style>
@font-face {
    font-family: 'Work Sans';
    src: url(https://fonts.gstatic.com/l/font?kit=QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQNi0bqIjtEhP5dPVoE2n_&skey=a19f1b3d756da88c&v=v18) format("woff2");
}
</style>

FirstLayout｜Google Fonts を preload で先読みし最適化
 TAKLOG｜【令和最新版】Google Fontsの読み込み最適化の結論

素人がやっていることなので、このやり方は間違っているかもしれませんけど...。