ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

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を検索できます。

variable fonts

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つのプロパティが用意されています。

重量wghtfont-weight
wdthfont-stretch
傾斜slntfont-style
イタリックitalfont-style
アウトラインopszfont-optical-sizing

Variable fontのwghtやwdthなどはAXISPRAXISでも確認することができます。

最近はフォントを大きく使ったデザインがトレンドになっているので、Variable Fontでさらに新しいフォントを使った表現がトレンドになりそうですね。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ