タイトルは検索でヒットしやすいように。
下にその件のセクションがありますが、同じことで困っている人がいるかもしれないので。
いつもの「【生活】◯◯◯【日常】」のスタイルをヤメたわけではないですが。
さて、まずはいつものような日記。
日曜日は「東京も積もるかも」と言われた雪の予報でしたが、結果的にはラッキーな空振り。
俺は膝がダメだし、妻は腰がダメで、今は雪かきができそうにないので、今シーズンは積もるような雪は勘弁してください。
麻雀一番街
今週もまた2垢通してノートップ。
2着を狙いにいく場面がとても多かった気がします。
メインは合計9戦で着順がトップから順に0回・5回・3回・1回。
平均順位が2.56。
オール銀河卓。
先週より170ptsのマイナスで、辛うじて4ケタのポイントをキープ。
サブは合計7戦で着順がトップから順に0回・3回・1回・3回。
平均順位が3.0。
オール銀河卓。
先週より670ptsのマイナスで、降段危機の領域に突入しそう…。
観る雀
Mリーグ
今週はさっき～と瀬戸熊さんが勝利。
いいね。
とりあえずは好位置をキープ。
映画
観ていません。
ドラマ
観ていません。
アニメ
観ていません。
巻き爪
安定して快調です。
チャレンジ・サイクリング
今週は、先々週と同じ場所なのだけど、18時から拘束され、深夜1時に解放されるという変則シフトでした。
この時間帯なら本業の調整さえできれば普段と同じような生活時間帯となるので、本当に助かります。
いつもと同様にチャリをレンタルし、4kmチョイをサイクリング。
膝
先週、膝の水を抜きましたが、今現在でもう溜まってきている感じはあります。
ひどい人は毎週水を抜くのだとか。
「膝の水を抜くと癖になる」と言う人がいるけれど、それは大きな間違いです。
膝の水を抜くのは対症療法です。
根本的な治療ができていないので、抜いても抜いても水が溜まるだけなのです。
来週診察の予約をしているので、そのときにまた水を抜くことになるのかな…。
GoogleFontsのサブセット化の話
少しばかりWeb制作の話です。
今進行中のWordPressの案件で、Noto Sans JPのweight 400と、Noto Serif JPのweight 400、500、700、900と、Yuji Syukuを使用することになっています。
いつものようにfunctions.phpにGoogleFontsを読み込むためのコードを書いていました。
// Sample-1
function google_fonts_enqueue() {
wp_enqueue_style('googlefonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP:wght@400;500;700;900&family=Yuji+Syuku&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue' );
こんな感じで書いていたのですが、さすがに和文フォントが重いかなと思ったので、メインコピーの数文字にしか使っていないYuji Syukuについては、必要な文字だけを読み込んでみることにしました。
ネットで検索すると、以下の使用例が出ていました。
// Sample-2
function google_fonts_enqueue() {
wp_enqueue_style('googlefonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&display=swap&text=あーたんのBIGてっぱ', array(), null );
}
add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue' );
これはNoto Sans JPのweight 400を「あーたんのBIGてっぱ」の文字だけ読み込む場合の例です（「ん」は重複するので、1回読み込めばいいわけです）。
では、これをアレンジして、先ほどのコードに当てはめてみましょう。
// Sample-3
function google_fonts_enqueue() {
wp_enqueue_style('googlefonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP:wght@400;500;700;900&family=Yuji+Syuku&display=swap&text=あーたんのBIGてっぱ', array(), null );
}
add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue' );
これでYuji Syukuについては「あーたんのBIGてっぱ」の文字だけを読み込むように……あれ？
URLを「&」で繋いで「family=」でフォントを指定しているのはいいけど、さらに並列に「&」で繋いで「text=」を書いたら、読み込もうとするフォントすべてで「あーたんのBIGてっぱ」の文字しか読み込まないのではないでしょうか？
そんな疑問が浮かびました。
検証してみよう
Googleで検索しまくっても答えは見つからなかったので、これは実際に検証してみましょう。
Chromeで該当ページを表示し、DevToolsを起動して「ネットワーク」のタブで読み込んだファイルやそのサイズを確認します。
まず、サブセット化する文字を指定せずにフルで読み込むSample-1の場合。
52件で1.3MBのリクエスト。
次に、サブセット化する文字を指定したSample-3の場合。
3件でたったの18.4KBのリクエスト。
これはいくらなんでも少なすぎるでしょう。
試しに、Noto Sans JPのweight 400だけをフルに読み込んでみましょう。
36件で430KBのリクエスト。
フルに読み込んで欲しいフォントを読み込んでいないわけですから、Sample-3の書き方はNGであることがわかりました。
解決方法の模索
まずは以下のようにURLの中でのフォント指定とサブセット化の記述順を変更してみました。
// Sample-4
function google_fonts_enqueue() {
wp_enqueue_style('googlefonts',
'https://fonts.googleapis.com/css2?family=Yuji+Syuku&text=あーたんのBIGてっぱ&family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP:wght@400;500;700;900&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'google_fonts_enqueue' );
3件で18.4KBのリクエストだったので、結果はSample-3と同じでNG。
解決方法はこれだ
こうなったらリクエストのURL自体を2つに分けるしかないか…ということでやってみました。
// Sample-5
function google_fonts_enqueue() {
wp_enqueue_style(
'google-fonts',
'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&family=Noto+Serif+JP:wght@400;500;700;900&display=swap',
array(),
null
);
wp_enqueue_style(
'google-fonts-yuji-syuku',
'https://fonts.googleapis.com/css2?family=Yuji+Syuku&text=あーたんのBIGてっぱ&display=swap',
array(),
null
);
}
add_action('wp_enqueue_scripts', 'google_fonts_enqueue');
52件で1.2MBのリクエスト。
これが正解のようです。
だけどこの組み合わせの場合は0.1MB削減しただけか…。
fonts.googleapis.comに対して2回リクエストして0.1MBだけの削減なら、サブセット化しないことを選択してもいいような気がします。
どちらが正解なのかはわかりませんが、自分の備忘録として。
かつ、Googleで検索しても方法を明記しているサイトは皆無だったので、誰かのお役に立てれば幸いです。