Variable font demos

Variable font demos

I was testing some variable fonts and made this small website to show what I learned.

You can check out the source code for all of this on Github. This website was fully hand coded with no external tools used.

—Johan

Demo 1: League Mono

Shows how we load a variable font in .TTF format + shows how we access custom properties. Simplified code:

@font-face {
  font-family: 'League Mono';
  src: url('LeagueMonoVariable.ttf');
  font-display: swap;
  font-style: normal italic;
  font-weight: 100 900;
}

body {
  font-family: 'League Mono';
  font-weight: 400;
}

h2, h3, h4 {
  font-weight: 700; /* between 100 and 800 */
  font-variation-settings: "wdth" 120; /* between 50 and 200 */
}

The cool thing here is that we have a lot of font variations in a single file, which is a peformance win.

View demo

Demo 2: Meta

Shows how we load a variable font in the efficient WOFF2 format + shows how we access custom properties. Simplified code:

@font-face {
  font-family: 'FF Meta VF';
  src: url('MetaVariableDemo-Set.woff2') format('woff2');
  font-display: swap;
  font-style: normal italic;
  font-weight: 100 900;
}

body {
  font-family: 'FF Meta VF';
}

em {
  font-style: italic;
  font-variation-settings: "ital" 1;
}

I find that it takes a bit of looking around to figure out what you can exactly change in a variable font.

View demo

Demo 3: Animation

Just for fun, you can animate the custom properties. Here's a small demo that does just that.

View demo

Resources

Resources I used to learn about variable fonts.

Fonts used in the demos