お問い合わせはコチラから

Noto Sans JPで可変フォント(variable font)を利用する

サイト運営

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..90031.3kB
3:wght@100;200;300;400;500;600;700;800;900277kB
Google Fonts APIで可変フォント(variable font)を利用する

CSSでfont-weightを任意に指定できる

font-weightを100~900の間の任意の数値で太さを指定できるようになります。

例えば、normalは400ですが、少し太くしたいなら、450を指定することができます。

body{
font-weight:450;
}

まとめ

Noto Sans JPの可変フォント(variable font)を利用してみたメリットとしては、通常の太さ指定だと太すぎてつぶれてしまったりする場合に太さを調整することができるようになります。

デザインをWebに置き換える時にデザインと文字の太さが合わないというような場合にも、Web側で細かい調整ができるようになるので便利だとおもいます。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

タイトルとURLをコピーしました