Variable fontsを使ったウェブサイト制作
Variable（可変）Fontをを使うことで、フォントを使った表現が幅広くなります。Variable Fontの実装をご紹介します。
モダンブラウザではVariable fontをサポートしているので、IEをサポートしないウェブサイト制作ではVariable fontを使って制作できます。
Variable fontはプロポーションを数値で設定できるため、フォントウェイトをアニメーションさせることも可能です。
フォントウェイトをアニメーションできるのはインパクト大きいですね。
Variable fontの使い方
今回はGoogle FontsのVariable font「Roboto Mono」を使ってみます。
Google Fontsでは「Show only variable fonts」にチェックを入れると、Variable fontを検索できます。
Style Sheetの設定
Google FontsのAPIで、100～700のウェイトを使えるようにするには下記でOKです。
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..700&display=swap" rel="stylesheet">サーバにフォントファイルをアップして利用する場合は下記になります。
@font-face { font-family: 'Roboto Mono'; src: url('../fonts/RobotoMono-VariableFont_wght.ttf') format('woff2 supports variations'), url('../fonts/RobotoMono-VariableFont_wght.ttf') format('woff2-variations');}font-variation-settings
Variable fontのウェイトやスタイルは「font-variation-settings」プロパティで利用します。
例えばウェイトを設定する場合は下記になります。
p{ font-variation-settings: 'wght' 700; }さらに幅も変更する場合は、カンマで区切って記載します。
p{ font-variation-settings: 'wght' 700, 'wdth' 300; }font-variation-settingsには5つのプロパティが用意されています。
| 重量 | wght | font-weight |
| 幅 | wdth | font-stretch |
| 傾斜 | slnt | font-style |
| イタリック | ital | font-style |
| アウトライン | opsz | font-optical-sizing |
Variable fontのwghtやwdthなどはAXISPRAXISでも確認することができます。
最近はフォントを大きく使ったデザインがトレンドになっているので、Variable Fontでさらに新しいフォントを使った表現がトレンドになりそうですね。
