Variable Fonts

← All Butter documentation

Variable fonts are font files that encode a continuous range of weights, widths, and other typographic axes in a single file. Instead of switching between separate Bold and Regular font files, you can smoothly animate weight or stretch as a number. There are lots of opportunities to create kinetic typography animations with this!

Loading a variable font

Call loadFont in setup. Butter ignores the font you pass in and creates a font picker for users. If we see that you're using variable font functions in p5, the font picker will default to a variable weight version.

let font

async function setup() {
  createCanvas(300, 100)
  font = await loadFont('')
}

function draw() {
  background(255)
  textFont(font)
  textAlign(LEFT, TOP)
  textSize(50)
  textWeight(sin(millis() * 0.002) * 200 + 400)
  text('Hello!', 0, 10)
}

textWeight(weight)

Sets the font weight as a number. For variable fonts this is a continuous value — typically 100 (Thin) through 900 (Black). For static fonts it snaps to the nearest available weight.

textProperty(prop, value) and textProperties(obj)

These let you set any CSS text or font property directly, including OpenType variation axes not covered by dedicated p5 functions.

// Animate weight with textProperty
function draw() {
  textProperty('fontWeight', sin(millis() * 0.002) * 200 + 400)
  text('Hello!', 10, 50)
}

// Set multiple axes at once
function draw() {
  textProperties({
    fontWeight: sin(millis() * 0.002) * 200 + 400,
    fontStretch: '75%',
  })
  text('Hello!', 10, 50)
}

Other useful properties you can set this way:

| Property | Example values | |---|---| | fontStretch | 'condensed', '75%', '125%' | | letterSpacing | '2px', '-1px' | | fontKerning | 'normal', 'none' | | fontVariantCaps | 'small-caps', 'all-small-caps' |