Google fontsのNoto Sans JPを使っているサイトは多いと思います。
Noto Sans JPは100~900まで9通りの太さが提供されています。
実は、Noto Sans JPは可変フォント(variable font)に対応しています。
つまり、文字の太さを任意に指定することができます。
でも、普通の読み込み方だと可変フォント(variable font)にはならないので、注意が必要です。
この記事では、Noto Sans JPで可変フォント(variable font)を利用する方法をご紹介します。
Noto Sans JPで可変フォント(variable font)を利用する読み込み方
いきなり答えです。
add_action('wp_head',function(){?>
<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=Noto+Sans+JP:wght@100..900&display=swap" rel="preload" as="style" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<?php },0);
通常の読み込み方との違いは、wghtの指定の仕方です。
wght@100..900
と指定することで、可変フォント(variable font)を利用することができるようになります。
読み込むフォントファイルの数が増えてしまいそうですが、実際にはほとんど違いがありません。
# | 指定方法 | サイズ |
---|---|---|
1 | (指定なし=:wght@400相当) | 31.3kB |
2 | :wght@100..900 | 31.3kB |
3 | :wght@100;200;300;400;500;600;700;800;900 | 277kB |
CSSでfont-weightを任意に指定できる
font-weightを100~900の間の任意の数値で太さを指定できるようになります。
例えば、normalは400ですが、少し太くしたいなら、450を指定することができます。
body{
font-weight:450;
}
まとめ
Noto Sans JPの可変フォント(variable font)を利用してみたメリットとしては、通常の太さ指定だと太すぎてつぶれてしまったりする場合に太さを調整することができるようになります。
デザインをWebに置き換える時にデザインと文字の太さが合わないというような場合にも、Web側で細かい調整ができるようになるので便利だとおもいます。