Variable Fonts

Introducing Variable Fonts in Framer. When selecting Fonts, you’ll see a refreshed Font Picker with new categories—Google Fonts, Fontshare, and Variable, which allows you to filter all web and custom fonts with Variable Font support. You can find the Variable properties available for each typeface in the property panel, right next to the OpenType options. These properties are dynamic, they differ per font. Some will support tons of options, like Roboto Flex, yet many will support Width, Weight, and Slant. Following Fit Text, Text Balance, Text Effects, Text Masking, and OpenType, bringing Variable Font support makes typography in Framer better than ever. All of these features can be combined, unlocking unparalleled levels of creative freedom. And yes, Variable Fonts in Framer can be animated too. Using Component Variants and Interactions, you can bring your typography to life. We’re incredibly excited about the flexibility this brings.