Variable Fontのサポート状況

Variable Fontの概念は2016年9月にAdobe Typekitのチームが発表した概念で、AdobeによってVariable Fontのプロトタイプが発表されています(開発はAdobe・Apple・Google・Microsoftが共同)。

Variable Fontのサポートについては、下記の通りです。

1. Safari

macOS 10.13 High Sierra以降のSafari 11以降でサポート。
また、モバイルではiOS 11.0以降のSafariでサポート。
つまり、macOSもiOSも最新版にアップデートすることで、Variable Fontを使えるようになっています。

2. Chrome

2017年8月上旬のアップデートで、Chromeの開発者版であるChrome Canaryで動作をサポートしています。
Chrome Canaryはほぼ毎日アップデートされているため、そのままダウンロードしていただくことでVariable Fontを確認できます。

3. Firefox

Firefoxでは、Variable Fontの表示に設定が必要です。
プレリリース版のページでFirefox Developer Edition(推奨)かFirefox Nightyをダウンロードし、URLの窓に「about:config」を打ち込みます。
*「layout.css.font-variations.enabled」と「gfx.downloadable_fonts.keep_variation_tables」をTRUEに、「gfx.downloadable_fonts.otl_validation」*をFALSEにすると、Variable Fontを確認することができます。

Variable Fontを使ってみよう

対応ブラウザはダウンロードできましたか？
実際に、Variable Fontを使ってみることにしましょう。

1. Variable Fontをダウンロード

Variable Fontはまだ発展段階なので、Adobe Typekitなどの主要フォントベンダーサイトではまだ提供されていませんが、Adobe Typekitチームが先陣を切っていくつかのVariable Fontをダウンロードできるようにしています。
また、macOSの最新版でも「Skia」、Windows 10 Previewの最新版でも「Bahnschrift」というVariable Fontがインストールされています。

・Adobe Variable Font Prototype
・Source Sans Pro (Source Sans Variable)
・Source Serif Pro (Source Serif Variable)
・Source Code Pro (Source Code Variable)

これらのファイルをダウンロード＆インストールすれば、設定後対応ブラウザで作動を確認することができます。

2. CSSの設定

CSSに関しては、Variable Font用の新しいプロパティが用意されています。
それが、font-variation-settingsです。


画像はイメージ / 画像引用元：Design mode

font-variation-settingsは、Variable Font(OpenType、またはTrueType)の各バリエーションを利用します。
従来のフォントファイルでは、太さや幅を変えるには複数のファイルが必要でしたが、1つのファイルに様々なバリエーションを含め、ユーザー側で自由に調整できるように軽量化しています。

**「"機能名" 値」**を1組とし、複数指定する場合はコンマ区切りを行います。
normalを指定した場合、フォントは何も変形されません。

当然のことながら、フォントはVariable Fontに対応したものでなければいけません。
ここでは、macにインストールされている*「Skia」*というフォントを例にとって、設定をしてみましょう。

まず、font-familyプロパティにVariable Fontを設定します。
外部ファイルを読み込む場合は、そのコードをWebフォントを使うのと同じ手順で読み込んでください。

p {
　　font-family: Skia, sans-serif ;
}

次に、**「"機能名" 値」**という形式で値を指定します。
下記は、太さを500・幅を45としたときの例です。

p {
　　font-variation-settings: "wght" 500, "wdth" 45 ;
}

これらの機能名の代表的なものは、以下の通りです。

・wdth：フォントの幅(Width)・初期値は100
・wght：線の太さ(Weight)・初期値は400
・Opsz：オプティカルサイズ(Optical Size)・初期値は12(単位はptですが単位はつけずに指定します)
・ital：イタリック(Italic)・0(ノンイタリック)か1(イタリック)で指定
・slnt：スラント(Slant) ＝ フォントの傾斜・-90から90の間で指定

以上の設定を行うことで、ブラウザでレスポンシブなフォントを利用することができます。
アニメーションのプロパティを組み合わせれば、面白いことができるかもしれません。