How to subset fonts to optimize performance

Introduction

Read this first:

https://barrd.dev/article/create-a-variable-font-subset-for-smaller-file-size/

Python Commands

python -m pip install fonttools

python -m pip install brotli

pyftsubset Inter-VariableFont.ttf --unicodes="U+0020-007F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F, U+2190-21BB" --layout-features="*" --flavor="woff2" --output-file="Inter.var.woff2"

Get font info

https://wakamaifondue.com/

Variable fonts

@font-face {
  font-family: "Fraunces";
  src: url("fraunces.woff2") format("woff2");
  font-weight: 200 700;
}

h2 {
  font-family: "Fraunces";
  font-variation-settings: "wght" 375, "SOFT" 100;
}