🈂️
Source Han Sans Variabe Font（源ノ角ゴシックバリアブルフォント）のダウンロード先【アニメーション付き】
課題
Source Han SansのバリアブルフォントのダウンロードURLをよく忘れて大捜索するので、記事としてまとめておく。
対象リポジトリURL（GitHub）
直クリック
Source Han Sans VF WOFF2
アニメーションデモ
font-variation-settingsというバリアブルフォントをコントロールするプロパティの'wght';というウェイト値をCSSアニメーションで動かしています。
ソースコードはこちら。cssでのfontのロードは相対パスなので、プロジェクトに組み込む際はパスを変更してください。
フォントの形式
OTF (OpenType Format / PostScriptアウトライン)
OTFは、ベクターグラフィックを使用しているため高品質の印刷に向いています。
TTF (TrueType Font)
TTFは、軽量で互換性がすぐれておりディスプレイやウェブなどの表示に向いています。
WOFF2 (Web Open Font Format 2)
woff2は、OTF/TTF（WOFF）の後継で、ブラウザに最適化した形式です。@font-faceで使いやすいです。BrotliアルゴリズムというGoogle謹製のアルゴリズムを用いることで、Webフォントながら高速配信が可能だそうです。
HW系
HW（Hankaku Width）は半角系、FWは（Full Width）は全角系です。日本語では、半角文字を半角幅で表示するフォントか、半角文字も全角幅（等幅）で表示するかでビジュアルがおおきく変わるため、HW系が別で配信されることがおおいです。
Discussion