可変フォントは、さまざまなフォントスタイルの連続的なバリエーション（異なる幅、ウェイト、サイズなど）を保存できる 1 つのフォントファイルです。
可変フォントには、OpenType 1.8 仕様で導入された新しいデータ構造があります。これらのデータ構造により、フォントファミリーの 2 つ以上のスタイルを 1 つのフォントファイルにコンパクトにパッケージ化できます。
可変フォントには 1 つのアウトラインセットが含まれており、データセットからほぼ無制限のインスタンスを派生させることができます。これは、フォント内のアウトラインバリエーションのセットを定義することによって行われます。このようにして、多くのフォントインスタンスを追加できる単一または複数のアクシスデザイン空間が構成されます。
可変フォントを表示するには、Monotype Fonts の［閲覧］>［フォント］ページの［フィルター］セクションにある［可変フォント］の［可変フォントのみを表示］オプションを使用します。
注記：Monotype Fonts のすべての使用可能な可変フォントには、のラベルが付いています。
静的フォントと可変フォントの違い
下記の表で、静的フォントと可変フォントの違いがわかります。
| 静的フォント | 可変フォント |
定義 | スタイルが固定されており、バリエーションごとに他のファイルが必要なフォント。 | 多くの書体バリエーションを 1 つのファイルに保存できるフォント。 |
バリエーションごとに違うファイル | あり | なし |
Web サイトのパフォーマンス向上 | なし | あり |
デザインの柔軟性 | なし | あり |
CSS トランジションをサポート | なし | あり |
圧縮 | なし | あり |
レスポンシブタイポグラフィ | なし | あり |
配布のしやすさ | なし | あり |
アクセシブルタイポグラフィ | なし | あり |
含まれるスタイルの数 | 1 つ | 複数 |
ブラウザのサポート | あり | ほとんどの Web ブラウザでサポートされている 注記：ここをクリックすると、可変フォントをサポートしている Web ブラウザがわかります。 |
ダイナミックテキストの効果 | なし | あり |
可変フォントのメリット
可変フォントを使用するメリットは多くあります。以下に例を挙げます。
圧縮
可変フォントのサイズは、その可変フォント内の同じスタイル範囲を表す各フォントの合計サイズよりも小さくなります。例えば、プロジェクト内で別々に使用される 3 つ以上の静的フォントの合計サイズは、それらの個々のフォントを持つ 1 つの可変フォントのサイズよりも大きくなる可能性があります。可変フォントに追加するスタイルが多いほど、その節約は大きくなります。
Web パフォーマンスの向上
Web サイトでは、1 つの可変フォントファイルを読み込み、必要に応じて調整できます。これによって、Web サイトの読み込み速度とパフォーマンスが向上します。
配布のしやすさ
ダイナミックテキストの効果
可変フォントは、CSS アニメーションまたはトランジションを使用してアニメーション化でき、フォントのウェイト、幅、傾斜、またはその他の属性を時間の経過とともに変化させるダイナミックテキスト効果を作成できます。
可変性の向上
幅広いスタイルをパッケージにして、1 つのフォントファイルに入れることができます。OpenType 1.9 仕様では、5 つの特定のアクシスのタグを定義しています。
ウェイト
幅
オプティカルサイズ
イタリック（ローマンに対して）
斜体（ローマンに対して）
ただし、OpenType フォント仕様では、ユーザーが独自で定義したアクシスを使用することで、想像可能なあらゆるバリエーションを作成し、描画できます。
Monotype には、さまざまなウェイトや幅を含むように設計された多くのファミリーがあります。例えば、Helvetica Now、Cotford、Kairos Sans、Futura Now などです。
レスポンシブタイポグラフィ
可変フォントを使用することで、レスポンシブタイポグラフィとアプリケーションの調整が可能になります。ウェイトやコントラストなどの変数を調整することで、特定のデバイスでのリーダビリティを最適化することができます。
クリエイティブ効率
可変フォントは、柔軟かつ効率的で、創造的な可能性を秘めています。そのため、クリエイティブデザイナー向けの強力なリソースになります。
アクセシブルタイポグラフィ
読者とその環境に適応できる可変フォントの多様なバリエーションにより、より良い体験を提供することが可能です。
可変フォントの制限
可変フォントは、その仕様事例によって、次のような制限があります。
可変フォントは、複数のスタイルを圧縮した形式です。しかし、大規模な可変ファミリーから 2～3 種類のウェイトを使用したい場合などは、サイズの節約効果が失われる可能性があります。つまり、可変フォントは、ファイルサイズを節約できる一方で、不要なバリエーションを多く含むことになると、サイズが大きくなってしまうのです。
すべてのフォントが可変形式で使用できるわけではありません。
比較的新しいフォントデータは通常、補間が可能なものとして描かれ、可変フォントとして簡単に開発ができます。一方、比較的古いフォントは、静的デザインとして個別に描かれるので、アクシスの構造が多様で、補間可能なフォントとして簡単には構築できない場合があります。
例えば、Times New Roman は改変に適しません。それは、ストレスの方向性の変化や、小文字のセリフの形状と配置の変化により、不自然な補間を生むからです。
すべてのブラウザが可変フォントをサポートしているわけではありません。
詳細については、ブラウザのサポートを参照してください。
可変フォントファイル内でフォントのバリエーションを調整するのは複雑な作業であり、これを行うためには、CSS と可変フォントのデザイン空間をよく理解している必要があります。
可変フォントのブラウザサポート
当社の WOFF および WOFF2 フォントファイルは、最新のすべてのブラウザがサポートしています。ブラウザやそのバージョンによって、サポートする形式が異なる場合があります。
WOFF のブラウザサポート
Internet Explorer 9+
Edge 12+
Firefox 3.6+
Chrome 5+
Safari 5.1+
Opera 11.5+
iOS Safari 5+
Android 4.4+
Blackberry 7+
Opera Mobile 12+
Chrome Android 70+
Firefox Android 63+
Internet Explorer Mobile 10+
UC for Android 11.8+
Samsung Internet 4+
QQ 1.2+
Baidu 7.12+
WOFF2 のブラウザサポート
Edge 14+
Firefox 39+
Chrome 36+
Safari 12+
Opera 23+
iOS Safari 10+
Android 67+
Opera Mobile 46+
Chrome Android 70+
Firefox Android 63+
Samsung Internet 4+
QQ 1.2+
Baidu 7.12+
可変フォントのダウンロード
注記：企業ユーザーを選択すると、フォントファイルをダウンロードできます。
30 日のトライアルでは、ダウンロードをご利用いただけません。ご質問がございましたら、[email protected] までご連絡ください。
次の手順に沿って、Monotype Fonts プラットフォームから可変フォントをダウンロードしてください。
同期とダウンロードのオプションアイコンをクリックし、必要な可変フォントを選びます。
［ダウンロードのオプション］タブを開きます。
ダウンロードするファイル形式（CFF、TTF など）を選択します。
ダウンロードするフォントのウェイトとスタイルを個別に選択するか、［ファミリーのダウンロード］をクリックして、ファミリー全体をダウンロードします。
可変フォントのインストール
Mac
Mac にフォントをインストールするには、次の手順に従います。
ダウンロードした .zip アーカイブをダブルクリックして、解凍します。
Mac へのフォントのインストール方法には、次の 2 つがあります。
フォントを有効にして、［Library］フォルダー内の［Fonts］フォルダーにファイルをドラッグします（Macintosh HD/Library/Fonts）。また、ショートカット（Cmd+Shift+G）も利用できます。
Font Book（Mac OS のフォント管理アプリケーション）を使用して、フォントをインストールします。
フォントをダブルクリックすると、Font Book ウィンドウが開きます。
［Install Fonts（フォントのインストール）］をクリックして、フォントをインストールします。
詳細については、Apple Web サイトのサポートセクション（http://support.apple.com/kb/HT2509）を参照してください。
新しくインストールしたフォントを使用するには、使用中のアプリケーションを再起動します。
Windows
Windows XP 以降：
.zip アーカイブを右クリックして、［Extract All（すべて解凍）］を選択します。選択した場所に、フォントを含む新しいフォルダーが作成されます。
Windows の他のバージョン：
ローカルディスク（C:）› [Windows] › [Fonts（フォント）]へ移動します。ダウンロードした .zip ファイルから展開したフォルダーを探し、フォントファイルを Fonts フォルダーにドラッグします。
Windows 7 以降：
解凍したフォントファイルを右クリックし、［Install（インストール）］または［Install for All Users（全ユーザー向けにインストール）］を選択します。
新しくインストールしたフォントを使用するには、使用中のアプリケーションを再起動します。
可変フォントの同期
フォントを同期させるには、フォントをブラウザのダッシュボードから Monotype デスクトップアプリに移動させる必要があります。
フォントとフォントファミリーを Monotype デスクトップアプリに同期すると、自動的にほとんどのクリエイティブアプリケーションで使用できるようになります。ユーザーが個々のフォントファイルをダウンロードする必要はありません。
同期は、Monotype Fonts を通じてフォントにアクセスする主要な方法です。
次の手順に沿って、可変フォントを Monotype デスクトップアプリに同期させます。
同期とダウンロードのオプションアイコンをクリックし、必要な可変フォントを同期させます。
［Sync to Monotype App（Monotype アプリへの同期）］タブで、お好みのファイル形式（CFF、TTF など）を選択します。
個々のフォントのウェイトおよびスタイルを同期させるか、［Sync family（ファミリーの同期）］をクリックして、ファミリー全体を同期させます。
可変フォントの同期解除
次の手順に従って、同期した可変フォントの同期を解除します。
同期した可変フォントの同期とダウンロードのオプションアイコンをクリックします。
［Sync to Monotype App（Monotype アプリへの同期）］タブで［Unsync（同期解除）］をクリックします。
可変フォントの使用
市販の可変フォントは現在、TTF 形式で作られています。可変フォントの注文では、対応する静的フォントのセットをリクエストすることもできます。これらのフォントは、可変フォントと同時にインストールすることが可能です。
可変フォントは、Web およびデザインチームにとって最も役立つものかもしれません。可変フォントは、静的フォントと比較して、ファイル全体のサイズを節約することができます。これは、特に Web アプリケーションにとって重要です。ファイルサイズの節約は、デザインとスタイルの数によって変わり、一般的には、ファミリー内のスタイルの数に比例します。また、可変フォントは、UI デザインチームに柔軟性をもたらします。