はじめに
Webフォントは無償のものもあり、気軽に利用できる環境になっています。中でもGoogle Fontsを利用している人も多いのではないでしょうか。私もよく使わせてもらっています。
今年、 コーディングしたものの、デザインと見比べると、boldの太さが異なるといったという事があり、Webフォントを使う時の注意点の1つを残しておこうと思います。
以下では Google Fontsの M PLUS 1pを利用する想定の例を挙げながら説明します。（キャプチャはMacのChrome 78.0.3904.108（Official Build） （64 ビット）で表示したものになります）
import時に単一のfont-familyで利用する時の問題
Google Fontsのページを参照して、 M PLUS 1pを利用して選択すると、
@import'https://fonts.googleapis.com/css?family=M+PLUS+1p&display=swap&subset=japanese';というようなURLになるよ、と教えてもらえます。
ただ、これで boldを指定しようとすると以下のように、表示されます。
https://codepen.io/aktuehr/pen/NWPGrPM
font-weightが 600以降の数値と、 boldのときに、気持ち太くなっているのに気づくでしょうか。
この太さですが、 400より少し太いくらいなのですが、 500よりは細いため、これはブラウザ側でよしなに解釈して boldの太さはこれくらいでしょうと、太くしてくれているようです。
これで問題なければ良いのですが、ブラウザに依存する形になるため、ブラウザのバージョンアップなどで太さが変わってしまうといった事があるかもしれません。
import時にfont-familyにサイズを指定して利用して、太字をきちんと表示する
意図通りの太さの boldにするためには、Webフォントのimport時に boldにあたる font-familyも指定する必要があります。
font-weightの boldは、数値では 700にあたります。
https://developer.mozilla.org/ja/docs/Web/CSS/font-weight
また、通常時のフォントサイズは regularですが、数値では 400にあたります。
それぞれWebフォントに、 400と 700の太さが用意されている事を確認し、その2つのfont-familyを含むようにimportします。
Google Fontsの場合は以下のようになります。
@import'https://fonts.googleapis.com/css?family=M+PLUS+1p:400,700&display=swap&subset=japanese';上記のようにしてimportしたところ、以下のように、 boldの値が何も指定しなかった時より太くなりました。
https://codepen.io/aktuehr/pen/bGNVaqX
ちなみに、Chromeでは 600以上の数値を入力した場合は 700で表示されるようになっています。
boldの太さを700ではなくしたい場合
先ほど、 font-weightの boldは、数値上では 700と同じと紹介しましたが、デザイン上の都合などで、「このプロジェクトでは boldはもう少し細い/太いフォントが良い」というケースが出てくることもあります。
その場合は、CSSのカスタムプロパティ (変数)やSCSSの変数などで、 boldの値を定義して使用すると毎回悩みません。
@import'https://fonts.googleapis.com/css?family=M+PLUS+1p:400,900&display=swap&subset=japanese';:root{--this-site-bold:900;}.element{font-weight:var(--this-site-bold);}余談
全部のfont-familyを使える状況にするとこんな感じになります。
https://codepen.io/aktuehr/pen/yLyYOwR
boldは 700となっている事が確認できますね。
さいごに
Webフォントは、ダウンロードを必要とするためページの表示速度に影響します。全てのweightのfont-familyを存在させる事は稀ですが、通常(regular)と、太字(bold)だけは代表として、400,700(もしくは、フォントが指定する regularと boldの数値)をimportしておくのが良いと思います。
また、デザイナーさんが別でいらっしゃる場合は、意図した太さになっているかの確認を一度取るのが良いでしょう。細かいところですが、全体の印象に関わるので大事な事だと思います。