Framer Update, Layout & Design

Framer Update: Variable Fonts

Benjamin

5:44

12K views

Nov 6, 2024

About this lesson

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 to designers. https://framer.com/updates/variable-fonts

🌞 Start for free: https://framer.link/yt

📚 Learn more at: https://framer.link/yt-academy

💎 Join the Community: https://framer.link/yt-community

🎉 Follow on X: https://framer.link/yt-x

0:00yo my name is Benjamin and this is 0:03variable fonts in framer a brand new 0:06update making typography in framer 0:09better than ever this year we've already 0:11shipped a plethora of exciting 0:14typography features from text balance to 0:17effects to masking and open type support 0:21all leading up to variable font support 0:24so without further Ado let's dive in 0:27here we have a text layer using the 0:30Roboto Flex font and if I open the font 0:33picker you'll see that we added many 0:35more filtering options including the 0:39ability to filter by variable fonts only 0:43and as you can see there are tons of 0:45variable fonts to choose from and for 0:48this layer we'll keep it set to Roboto 0:51flex and the actual variable font 0:54properties can be found in the property 0:57panel now the amount of properties you 1:00will see here will differ per font 1:02Roboto is a great example as it supports 1:05tons of variable font options almost all 1:08variable fonts will have a weight 1:11property that you can control and many 1:13also support width and as I'm changing 1:16the sliders notice how the layer on the 1:19canvas updates in real time variable 1:22fonts give you so much more flexibility 1:25and control over your fonts you can 1:28endlessly fine-tune until you find 1:30something that's perfect for your site 1:33and we want exploration in framer to be 1:36playful and forgiving so at any point I 1:39can hover over one of these inputs and 1:42right click on the arrows to instantly 1:44reset its value back to the default 1:48variable font features will also work 1:50for many icon fonts or ding bads giving 1:54you complete control over the stroke 1:57width of many different shapes and of 2:00course you can also use all of these new 2:02features when you upload custom variable 2:05fonts and again the amount of properties 2:08available depends on the specific font 2:12some have many and some have just a few 2:15but most of them will support weight 2:17giving you a lot more control over font 2:20weights across your site and variable 2:23fonts also work within textiles for 2:26example here I have two paragraphs using 2:29a single 2:30textile and let me open it up hit edit 2:35and here you'll also find variable 2:37options and in this case I can tweak the 2:39font weight and what's great about 2:42framer is that all existing features 2:45like text stroke masking fit text and 2:50more are all compatible with one another 2:54and thus all compatible with variable 2:57fonts and they can be mixed and 3:04matched unlocking new creative effects 3:08and 3:12layouts and you can even tweak variable 3:15options on a specific part of your text 3:19for example here I can select only the 3:22first word of my text layer and then 3:25start tweaking it with 3:31some custom fonts will support more 3:33unique variable options like this round 3:36property we can make this a rounded type 3:39phas or completely sharp or somewhere in 3:46[Music]3:51between and yes we support variable font 3:55animations using component variant we 3:58can create animations 4:00sequences Loops interactions like hover 4:04States and more here using three variant 4:08I've created a simple Loop that animates 4:10the variable font with which I can then 4:13place on a grid to create a wavy 4:16sequence and using this same setup with 4:18a different font we can create all sorts 4:21of different effects like this typing 4:24Loop that squishes more characters into 4:26the same box updating the variable width 4:29Wi on each variant and when using uni 4:32width fonts where changes in weight do 4:35not affect the size you can create 4:38autosized stacks and navigations where 4:41the weight changes on Hover without any 4:45jumps this is just a simple component 4:48with a hover variant and within the 4:51hover variant we animate the variable 4:54weight there are many fonts supporting 4:57both open type features as well as 4:59variable features and this will give you 5:02a truly crazy amount of control in 5:05framer here we're mixing fit text with 5:08variable features and open type features 5:11all on a single text 5:14layer and that's pretty much it for this 5:17video we're super excited about variable 5:19fonts in framer and we can't wait to see 5:22what you'll make with it thank you so 5:25much for watching this video and as 5:27always stay tuned for more updates 5:31coming soon 5:35[Music]

TeachesTypography

Also coversComponent Variants Components Form Inputs Grids Hover & Press Stacks Variables

Watch on YouTube ↗

‹ Framer Update: 2.5X Faster Loading

Sizing to Fill and Fit Content in Framer (Fundamentals Lesson 7) ›