このブログでは、日付を日めくりカレンダー風に表示し、そのフォントに「sans-serif」を指定しているのですが、フォントによってカレンダーの大きさが少し変わってしまいます。
そこで、日付のフォントをWebフォントのGoogle Fontsにしてみました。
日付に必要なのは数字だけなので、日本語フォントではなく欧文フォント（Work Sans）を使います。ブログの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">
参考になるブログ・Webサイト
セカヤサブログ - google fontsの使い方【コピペするだけ】
このままだとすべての文字を読み込むことになるので、使う文字だけを読み込みます。
（使う文字が少ないので「display=swap」は削除しました）
HTML
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&text=0123456789/" rel="stylesheet">
参考になるブログ・Webサイト
Web-saku - Google Fontsで必要な文字だけを読み込むようにして軽量化する方法
上記の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>
参考になるブログ・Webサイト
TASK_BLOG - 【ページロード高速化】Google Fontsをサーバーにアップする方法
PageSpeed Insightsで確認したところ、Dropboxからフォントを読み込むより、Googleから読み込むほうが（体感的にも）速かったので、最終的には次のようになりました。
head部分（設定→詳細設定→<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";
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>
参考になるブログ・Webサイト
FirstLayout - Google Fonts を preload で先読みし最適化
素人がやっていることなので、このやりかたは間違っているかもしれませんけど...。
