【使い方解説】太さが自由自在に変えられるWebフォント「バリアブルフォント」
https://tackweb.net/index.php/2019/09/11/gotham_montserrat/
当ブログでは上記のようなフォントに関する記事が、おかげさまで人気を集めています。ありがとうございます。
Googleが提供するWebフォント「Google Fonts」をはじめとして、今ではかなり多くのフォントがWebフォントとして利用できるようになり、どんな端末でも同じフォントが表示され、デザインの統一が図れるようになってきました。
Webフォントを使用する場合、例えばGoogle Fontsでは、各フォントに予め用意されたウェイト（太さ）の中から使用したいものを選択するという方法が使用されていますが、フォントの太さを無段階で自由に設定できる「バリアブルフォント」という種類のフォントが登場したので、ご紹介します。
この記事はこんな人におすすめ！
- Webフォントを使用していて、希望にドンピシャの太さを使用したい人
- バリアブルフォントの使い方を知りたい人
- 「バリアブルフォントって何？」という人
「バリアブルフォント」とは？
可変フォント(Variable fonts)は幅、太さ、スタイルごとに個別のフォントファイルを用意するのではなく、書体のさまざまなバリエーションを1つのファイルに組み込むことができるOpenTypeフォント仕様の進化版です。CSSおよび単一の@font-face参照を介して、特定のフォントファイルに含まれるすべてのバリエーションにアクセスできます。
出典：https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
つまり、これまでのWebフォントのように、あらかじめ用意されている「500」や「700」などのウェイトだけでなく、「180」や「345」など、自由に細かく指定することが出来るため、制作するWebページの雰囲気に合った文字組みが出来るようになります。
Google Fontsでのバリアブルフォント使用方法
すでにGoogle Fontsにも、利用可能なバリアブルフォントが、たくさんラインナップされています。
その使用方法をご紹介します。
Google Fontsサイトにアクセス
まずは、Google Fontsのサイトにアクセスします。
バリアブルフォントのみに絞り込み
「Show only variable fonts」の部分にチェックを入れると、バリアブルフォントのみの表示に絞り込まれます。
こうやって見ると、結構沢山の種類のフォントがバリアブルフォントとして提供されていることがわかりますね。
使用したいフォントをクリック
表示されたフォントの中から、使用したいフォントをクリックします。
今回は「Readex Pro」というフォントを選択してみます。
使用したいウェイトを指定
これまで通り、あらかじめ用意されたウェイトを選択して使用することも出来ますが、下の方にスクロールしていくと、ウェイトを設定できるスライダが出現します。
この部分で自分の好みの太さのウェイトを選択し、「+ Select this style」をクリックすると、そのウェイトで使用するための記述方法が表示されます。
1種類だけでなく、複数のウェイトを一度に使用することも出来ます。使用したいウェイトごとに「+ Select this style」をクリックすることで、右側に指定した一覧が表示されます。
あとは普通のWebフォントと同様に設定
あとは、これまでのGoogle FontsでWebフォントを使用する場合と同じで、CSSファイルを＜link＞もしくは@importで読み込ませ、font-familyにフォント名を指定するだけです。
先ほど選択したウェイトをCSSファイルに
h1 {
font-family: 'Readex Pro', sans-serif;
font-weight: 603;
}
p {
font-family: 'Readex Pro', sans-serif;
font-weight: 355;
}
のように記述すれば、そのウェイトで文字が表示されることになります。
まとめ
今回は、ウェイトが自由に指定できるWebフォント「バリアブルフォント」についてご紹介しました。
「500と600の間の太さがほしいんだよなぁ」など、制作中のWebサイトのデザインにピッタリのフォントを指定することができるようになりますので、気になった方は、ぜひつかってみてください。