ホームページ上でバリアブルフォントを実装する方法

クリエイターラボ

ホームページ上でバリアブルフォントを実装する方法

公開日 2026.2.6

良かったら”♥”を押してね！

Google FontsやAdobe Fontsなど書体をインストールできるページでよく見るスライダーってありますよね？

あの横線スライダーの中にある丸をつかんで左右に引っ張るとフォントサイズやフォントの太さ、横幅を変えられるアレです。

お恥ずかしい話、あれの実装方法があまりよく分かりませんでした。

検証ツールを使うなどでコードを確認すれば大体はわかるのですが、いつもなら初見のアニメーションとかでも「大体こうすれば実装できるのかな～。」みたいな感じでコードを見なくても検討がつく事が多いですが、「フォントの見た目を変えるってどうやってやるの？」、「CSSとかで太さや横幅を調整しているわけじゃないないもんな～。」、「JavaScriptは確実に使っているよな～。」といったような感じであまりピンと来ておらず、これに関してはコードを見てみないと実装方法がわかりませんでした。

ですが、調べてみたところ、結構簡単でした。

実務で使う事ってまずないかとは思うのですが、自分があまりにも気になりすぎてやり方などを調べたので良かったら見てほしいです。あまり応用などもないのでやりやすいです。休憩がてらご覧になってください。

1 バリアブルフォントについて
2 実装方法
3 まとめ

バリアブルフォントについて

まずフォントの横幅や太さを変えるにはそもそも様々な横幅や太さの情報が入っているバリアブルフォントというものを選ばないといけません。

フォントなら何でも良いわけではありません。

Google Fontsでフォントを検索してみても一個しか太さがないものもあればthin(100)からheavy(900)までの太さがあるものもあるかと思いますが、後者の複数個格納されているものを選ばないといけません。

そのフォントがバリアブルフォントなのかどうか調べるにはGoogle Fontsだったら左側のサイドバーの中にある『Technology』→『Variable』を選べばバリアブルフォントのみが表示されます。

RobotoとかOswaldがそれに該当しますね。

因みにそれらのフォントの横幅、太さを変えてみたいなら任意のフォントを選んで、ページ上部の方にある『Type tester』を選べばスライダーがあるのでそれを操作すれば色んな見た目を試すことができます。

ちょっと本題からずれましたが、ホームページ上でフォントの太さなどを変えたければ必ずバリアブルフォントを選んでください。

今回はRobotoを使ってみたいと思います。

実装方法

本題に入ります。

コードの量も大してありません。軽い気持ちで見てください。

今回スライダーで数値を操作できる用意するパラメータは下記の通りです。

Weight 太さ
Width 横幅
Slant 傾き

ちょっと触りづらいと思いますが、↑のcodepen内でスライダーを触ってみてください。（見た目のクオリティはご容赦ください・・・。）

フォントの見た目が変わるはずです。

簡単にコードの解説をしていきます。

HTML

<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=Roboto+Flex:slnt,wdth,wght@-10..0,25..151,100..1000&display=swap" rel="stylesheet">

まずはバリアブルフォントをhead内に読み込みましょう。

  <div class="control-item">
    <span class="control-label">Weight</span>
    <input type="range" id="weight" min="100" max="900" value="400" step="1">
    <span class="value-display" id="weight-value">400</span>
  </div>

Weight(太さ)を例に挙げて解説します。

コードを簡単に説明していきます。

２行目です。あのスライダーの正体はinputタグのrange属性でした！びっくり。こんな簡単だったのですね。ちょっと忸怩たる思いです。

minやmaxで最小値、最大値を決めて、valueでデフォルト値を決める。

stepは動かす単位です。今回ならば1ずつ増減します。

CSS

.variable-text {
  font-family: 'Roboto Flex', sans-serif;
  font-size: 72px;
  font-variation-settings: 
    'wght' 400,
    'wdth' 100,
    'slnt' 0;
  transition: font-variation-settings 0.05s ease-out;
}

エッセンスの部分のみ掲載しました。

初期値となるfont-variation-settingsとアニメーションで必要となるtransitionを設定すれば問題なしです。

JavaScript

const text = document.querySelector('.variable-text');

const weightSlider = document.getElementById('weight');
const widthSlider = document.getElementById('width');
const slantSlider = document.getElementById('slant');

function updateFont() {
  const weight = weightSlider.value;
  const width = widthSlider.value;
  const slant = slantSlider.value;
  
  text.style.fontVariationSettings = 
    `'wght' ${weight}, 'wdth' ${width}, 'slnt' ${slant}`;
  
  // 数値表示を更新
  document.getElementById('weight-value').textContent = weight;
  document.getElementById('width-value').textContent = width;
  document.getElementById('slant-value').textContent = slant;
}

weightSlider.addEventListener('input', updateFont);
widthSlider.addEventListener('input', updateFont);
slantSlider.addEventListener('input', updateFont);