885: CSS Fonts Fallbacks, Variable and Trimming

Scott and Wes dig into the wild world of CSS fonts—covering fallbacks, variable fonts, and new tricks like text-box-trim. They also break down font-display, font kits, and how to avoid layout shifts when loading custom type. Show Notes 00:00 Welcome to Syntax! 01:06 Brought to you by Sentry.io. Damnit Sans. 02:53 @font-face. 03:27 Font Display. 07:40 Avoiding layout shift. Fallbacks. 10:45 Variable fonts. Fontaine. font-kit Wakamai Fondue. Syntax Ep. 782. Font Variation Settings. 16:23 Variable font sizing. 17:46 v-fonts. 19:10 text-box-trim & text-box-edge. text-box-trim examples. 21:28 Browser support. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Scott Tolinski?

  Welcome to Syntax. Today, we're going to be talking about fonts on the web. There's so much here. There's a lot of new stuff from how we are able to trim and display fonts, to variable fonts, fallbacks, and so much more, stuff that I think everybody just can really level up their typography overall by learning some really basic skills here, but also new features on the web. My name is Scott Tolinski. I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes?

• 0:30Wes Bos?

  Hey, yeah. Fonts are a never-ending well of sort of digging into it, both in CSS and then, once you get into like custom fonts and variable fonts, it's just this wide, wide world. And we are going to attempt to show you some of the things that you as a developer should know about, especially a lot of these sort of newer features that are either now supported or are coming relatively soon.

• 1:05Scott Tolinski?

  Before we get started, let's talk about, actually, Sentry just released their own font. Did you see this, Wes?

• 1:11Wes Bos?

  Yes, I did. What's it called again?

• 1:13Scott Tolinski?

  Dammit Sands, I believe, Blink 182 reference here. So yeah, go check that out. We'll have a link to that in the show notes. Looks nice, actually. It's kind of cool to have your own typeface at a company, right?

• 1:25Wes Bos?

  Yeah. What a, what a cool thing to do. That was a Hack Week project and they went ahead and started using it on, I think that they're using it on the merch store as well. I didn't realize that when we redesigned the Syntax merch store, it's available at sentry.shop, that they were using this, this custom font. I remember being like, yeah, I really like this font. Big fan of how this looks. So yeah, check it out. And a lot of the stuff we're going to be talking today has to do with like font performance as well. If you've got like Layout Shift, you're going to see that in your Sentry Performance tab as well. So you certainly don't want Layout Shift because of your fonts. And we're going to tell you how to fix that today.

• 2:06Scott Tolinski?

  Yeah, totally. Cool. Well, if you want to check out Sentry font, do it, but I highly recommend you check out Sentry as a product at sentry.io/syntax. Sign up and get two months for free. It's the perfect place to make sure that your code does not suck because hey, you can fix all of your bugs and issues just by heading to the Sentry dashboard. I even used their wizard the other day. In fact, they have a wizard for several platforms and the wizard for getting Sentry going on SvelteKit, man, just run the wizard and then that's it.

• 2:36Wes Bos?

  The next JS one is also fantastic as well. It just because there's client side, there's server side, there's edge, there's like three different runtimes. They all talk to each other and it's, it's very good to get integrated.

• 2:49Scott Tolinski?

  Yeah, gotta love that. Okay, cool. Yeah, well, let's, let's get going here. The first thing we want to touch on is, you know, we have font face for defining custom fonts. Before we had at font face, you had a choice of what, like six fonts or something on the web? Or you could use, you could use Helvetica and have a fallback to Arial or something like that. And people who had a Mac would get Helvetica, people who had a Windows would get Arial and then, you know, whatever. But along comes at font face, we can load up our own custom fonts. We can use our fonts and along with that, we have a lot of other things such as font display. Can you maybe get a little deep into what font display is?

• 3:34Wes Bos?

  The thing about custom fonts is they are great. However, if your custom fonts take a long time to download, you get into the space where what do you do if you're trying to use a custom font, but that font is not either not available or it is not yet downloaded, right? Normally a font stack will just try the first one and then try the second one, et cetera, et cetera. But when you define a custom font, you need to also define how long it should wait and if it should wait while it's downloading. So that's what the font display property does. You set it to either auto, which allows the user agent, the browser To figure out what the best case was.

• 4:20Wes Bos?

  Often, that's a really good choice. The auto or like the default for a lot of these properties, not just fonts in general, but it's sometimes better to just let the browser figure out what to do in that case. However, if you do want full control over it, you start to think about the kind of three different periods. There's a blocking period in which the font is being downloaded downloaded and an invisible font is being shown. So if you've ever been to a website and you don't see any text at all, what's happening is it's it's rendering out the text invisibly and then it's downloading the font. So that's, that's called the blocking period and you kind of want to minimize that because it's annoying to sit there and wait for it to download.

• 5:04Scott Tolinski?

  Yeah. And one of the reasons why you do have to wait for it to download is fonts are not small.

• 5:09Wes Bos?

  No.

• 5:09Scott Tolinski?

  They're often disregarded as, oh, you just load up a font and there you go. But especially as we get into variable fonts, which we'll talk about in a bit, that include a lot more information in them. And even just a handful of any other fonts, fonts are not, are not small loads. So that could be a period of time, especially if you're loading it in a slow manner.

• 5:27Wes Bos?

  Yeah. Yeah. So we have the block period, which it attempts to download the font and shows you nothing. You have the swap period, which is the amount of time that it uses a fallback or another font while you're trying to download that one. And then you have the, the failure period, which is, oh, this font, we're not able to download it. We can't find it. It is not working at all. So what you want to do is set your font display to either, you probably don't want to set it to block unless you're explicitly like you're, you're rendering a poster or something that needs to be printed to PDF. You know, maybe in that case you want to, you want to block and wait for the font to be loaded.

• 6:10Wes Bos?

  Yeah, exactly. But swap will give you extremely small blocking period. And then immediately swap out. And then fallback gives you a small blocking period and a short swap period, meaning that you can try to load your custom font and it will fall back or it will swap to Times New Roman. Or if that's your second font, right? Or if you don't, if you don't specify anything, that's what it's gonna, it's gonna swap over to. But that can be kind of jarring if you were to. Try to download something, switch to the fallback and then it does download and then you switch back to it and you get this sort of like, uh, uh, uh, right? The cumulative layout shift or the rendering of the actual font.

• 6:54Wes Bos?

  So the difference between swap and fallback is swap will always swap it out once it's done downloading and fallback will only give you a short period in which it can be downloaded. Otherwise it's going to start to use the fallback value.

• 7:10Scott Tolinski?

  I guess the big question for me is why doesn't auto just take care of these situations?

• 7:15Wes Bos?

  It does. That's exactly what auto does is it, the browser will decide based on assuming things like network speed, device, et cetera, what the best use case is for the user because you as the developer cannot possibly account for every single use case. So auto is probably your, your best bet.

• 7:39Scott Tolinski?

  Yeah, word.

• 7:40Wes Bos?

  Now, the swap, you, you may want to put a swap on there. And if that is the case, you don't want to have what's called cumulative layout shift, meaning that if the font that you swapped to, and then once it's downloaded, the font that you're swapping back to are, have different characters, different sizes. What's going to happen is the, the text is going to shift up or down or, or words are going to wrap. That's a really annoying one, right? If you're starting to read a sentence, the font loads and then all of a sudden your, your context for where you were has changed.

• 8:18Scott Tolinski?

  Yeah, start over.

• 8:19Wes Bos?

  You, you can use the ascent override, descent override and line gap override values where you can basically take something that is loaded on the user's computer. So for example, you would say, you can say local Arial. And that will load up Arial, that's loaded on your user's computer, and then it will stretch all of the values of Arial to match the actual file, the font that you're trying to load. And those values can be figured out. NextJS font, Nux Fontaine will automatically do that. That's why, that's why when you use Next, they want you to use their own font

• 9:03Wes Bos?

  integration, rather than just loading it in a CSS link and going for it. But if you do not use any of those, you can, there's, there's a whole bunch of tools out there. Font Kit is probably the most popular one. That's what NextJS uses. Font Kit will basically look at your font during build time, measure these values, and then set your fallback font to stretch to perfectly fit that.

• 9:31Scott Tolinski?

  Interesting. Yeah.

• 9:32Wes Bos?

  Yeah. So here's, here's an example. At Fontface, it's called fallback for Poppins, which it falls back times in Roman, it stretches the ascents 105%, it's not stretches, compresses the descents 35%, and then overrides the line gap between the two. So you don't get that jarring change.

• 9:56Scott Tolinski?

  Man, that's great.

• 9:58Wes Bos?

  Yeah. This is kind of like the, like images, you know, like with images, you have to like compress and size and different formats and source set multiple versions of it, you know? That stuff is, you're never going to do that stuff unless you have a tool that is built into your, your build chain.

• 10:16Scott Tolinski?

  Yeah. Have you heard of this Fontaine? It's an unJS package.

• 10:23Wes Bos?

  Yes, that's what, that's what Next uses and they're recommending on the Google blog here.

• 10:26Scott Tolinski?

  Yeah. Yeah. Cool tool here.

• 10:28Wes Bos?

  I'm a big fan of that. You just drop it. So you grab a font, drag and drop it in there. It'll give you the value. So you don't even have to, I'm sorry, I just said you have to have as part of your build chain. You don't have to. You could do this simply when you're loading your font, you just drag your font into here and it will give you the value straight up.

• 10:45Scott Tolinski?

  Yeah. Okay, cool. So next up are variable fonts. Now, variable fonts are interesting because I feel like this was a feature that, you know, some people have talked about a little bit, but variable fonts include a lot of things and each variable font is different, which is part of maybe the challenge of working with them.

• 11:04Wes Bos?

  They have variables.

• 11:05Scott Tolinski?

  So you can't necessarily approach. They do. They have variables, which is as programmers, we love variables. You can change them. You can update them, whatever. And with variable fonts, you can update these variables to change the font, makes them variable themselves. So whether that is increasing the boldness by a certain amount in a way that the font is actually intended to, instead of like, well, just like a browser adding chunkiness to a font like some other fonts, you can actually have a sliding scale of how bold that this is, but not only like boldness and italicizing things and that. You can also get into individual modifications of individual glyphs, like the font that we use

• 11:50Scott Tolinski?

  on Syntax, MDIO. You can set a, a value for the font variation settings, which is the CSS property that you use to tweak these things. And you can set a variable in there to, or a value in there to even like swap out the zero. For ours, there's multiple zero options. There's a zero with a line through it. There's a zero with a dot in the center. There's options with variable fonts and you can tweak it to your heart's content based on what the font offers. And it's really pretty neat. The thing that can bite people with variable fonts sometimes is that the mode of setting these things is different than what we're used to, right? We're used to font weight bold, font weight 500, something like that, right? Yeah.

• 12:35Scott Tolinski?

  Font style, where with variable fonts, you have this font variation settings property. And inside of there, you give it like a key and then a value. So for the font weight is WH, uh, WGHT and then a number or italicize can be either like a sliding scale or a zero to one, but every font is just a slightly different in what they offer. And that's why there's this really great tool that Stephen Nixon showed us on our episode where we had him on talking about building fonts, which is the Wacombe Fondue.

• 13:12Scott Tolinski?

  I don't, I don't know the significance of that name, but basically you drop in your variable font inside of here, inside of this tool. And it not only tells you all of the different possible settings or anything like that. It gives you CSS classes to use certain modifications to your font. That way, or you can set CSS variables or you can give certain classes a thing, or you can just utilize it to see what the options are even available for your specific variable font. It's, it's really pretty neat to dive into. And, and sometimes I can geek out on just how many things you can tweak with these variable fonts.

• 13:48Wes Bos?

  Yeah. It's, it's really cool because the variations are not preset, meaning that it's not like, oh, fonts can have like weight and, and width and, and height and things like that. Like the, the, the values can be anything like. I'm like, got a demo going right now called the variable poo demo. And it's from 100 to 900. And depending on where you're at, the size of the hat and the eye angle are, are changed, which is hilarious. Or like how wide the stroke is on something. So variable fonts can be multi-color as well, which is kind of interesting. Look at this one, X-ray.

• 14:28Wes Bos?

  It has one, two, three, four, five, six different possible values that you can change on it. It's just wild. And often these are, are a really good choice for when you need to make things bolder without changing the actual size of your text. Because if, if you were to make a font bolder, they would often change the width of the text and that would cause a reflow. Whereas many of these variable fonts will allow you to change the weight without changing the size of it. Yeah.

• 15:04Scott Tolinski?

  Yeah, there's a lot, there's a lot to like about variable fonts, even if it's just tweaking it ever so slightly to make it original or something like on my website, Wes, I, uh, I just, we have like a little L right with that, that font. And I just changed that one specific L. So I was able to change that character. So anytime it was a heading and an L, it added a little other Q to it.

• 15:30Wes Bos?

  Oh, this?

• 15:32Scott Tolinski?

  Sorry, it's the I. Um, the I is the one that I changed. If you look at the, like my name, Scott Tolinski on there, the I has like some extra little feet on it. And I was able to do that using by changing some font variation settings.

• 15:44Wes Bos?

  That is awesome. I love that. You can simply just change out one of the letters because often these fonts are, are they're kind of fancy. And you love it for everything, except when you hit the like L or H or, or something. It's like, ah, that's a little bit, a little bit too fancy for me, you know, or in Scott's case, not fancy enough. And, uh,

• 16:08Scott Tolinski?

  Yeah, yeah.

• 16:09Wes Bos?

  It looks like a little guy running.

• 16:11Scott Tolinski?

  I know, right? Yeah, I know. It was so fun to go through that because some of them did look kind of like a little L or you could change them and stuff and, um, just really nice. Yeah.

• 16:19Wes Bos?

  Love that. That's, that's so fun diving into all these fonts. The font size, I guess, like we talked about loading them, but they are generally larger or, or it really, it really depends, I, I guess.

• 16:33Scott Tolinski?

  Hey? I would say they're almost always larger specifically. I mean, unless you're like dealing with a

• 16:38Wes Bos?

  Loading in three weights?

• 16:40Scott Tolinski?

  Well, that's the thing. Yes. So, um, we were doing that on the syntax site. We were loading in several weights of the font, several like italic weights and whatever. And I don't know if the, the end cost ended up saving us cost of the, the end of the day, I probably should have done that math. All I know is that it wasn't a huge hit and it made more sense to use the variable font because that way, uh, we could just load one file, right?

• 17:03Wes Bos?

  Yeah. Then the world's your oyster. Cause like I, on my website, I've got, Um, I've got one font that I have to load the, the regular and the book version, and then the regular italic and the book italic, you know, that's four weights. And, and I'm wondering if there was a variable version of that available. If it would be smaller than, than needed, but then on the other, on the other half is that the font isn't downloaded unless it's needed on that page.

• 17:33Scott Tolinski?

  Yeah. So then, yeah.

• 17:35Wes Bos?

  It's always a dance, you know, you gotta figure it out yourself. I'm, I'm happy with the loading strategy I have, but it's always something I'm thinking about.

• 17:42Scott Tolinski?

  Yeah, for sure. Yeah. Variable fonts, super cool. Um, and Wes, also you said you were looking at this v hyphen fonts.com. I don't know if you said that explicitly, but

• 17:52Wes Bos?

  Oh, yeah.

• 17:52Scott Tolinski?

  v hyphen fonts.com is a really cool website too. Not only to see what's out there, but also just to experiment and mess with fonts and, and play around with them and see like what kind of cool things you can do. You know, you can animate these properties too. So like, you can do a lot with this stuff. I mean,

• 18:08Wes Bos?

  Oh, yeah, that's

• 18:09Scott Tolinski?

  You could do a lot of creative work with them.

• 18:12Wes Bos?

  Animating the like weight of

• 18:14Scott Tolinski?

  Yes.

• 18:15Wes Bos?

  Specific letters while the other letters are less. You can make this really cool kind of wave, wave animation, you know? Look at this one, Corona Face Impact. Somebody changed the bags under the eyes, how big the beard is.

• 18:33Scott Tolinski?

  Oh, my God.

• 18:35Wes Bos?

  And whether or not there's a face mask.

• 18:37Scott Tolinski?

  That's hilarious.

• 18:39Wes Bos?

  I need to, I need to make a font. That's just like one. I, I often think about like areas, I'm learning like 3D modeling right now. And I often think about areas of my life where I'm like, I have never in my life, I, I wouldn't even know where to start. How do you make a font? I'm assuming you just make every letter in like Illustrator or whatever, but I don't know.

• 19:00Scott Tolinski?

  Go listen to the episode with Stephen Nixon. We talk a lot about that. You were, you were out of town for that one, I believe. Yeah. CJ and I did that.

• 19:07Wes Bos?

  All right. That would be really cool. Last thing we want to talk about is this new property to CSS that is text box trim and text box edge. And if you are someone who either obsesses over like padding or spacing and margin, or someone whose designer says, can you move it up three pixels? Because they they come back to you with a bunch of lines overlaid. You're going to be very, very happy about this because the the like the line height of a font is from the top of the the caps, like the top of like an H all the way down to your

• 19:49Wes Bos?

  the bottom of your descender, which is like a Y or a G that will come down. And and often that will look funny if you don't have any characters that have have that space above it, you know, you you have some margin and it's it's it seems like it's added some extra padding or margin because of the the spacing on the font. So text box trim will allow you to trim off that extra space on the top or the bottom. And then text box edge will allow you to specify where those trimming lines happen. Either by the ascenders, the cap lines, the the X height, which is the the height of an X,

• 20:30Wes Bos?

  base height, baseline or descender line, which that's like Latin characters. Once you get into like Chinese characters, it's it's even more wild.

• 20:42Scott Tolinski?

  Yeah, you know what? One of the the the biggest things for me that this will solve is like, man, I get so angry doing padding for buttons because you're like, okay, the top just needs a little bit different than the bottom.

• 20:55Wes Bos?

  It looks weird.

• 20:56Scott Tolinski?

  You got to get in there and fine tune it. Yeah, it looks weird. So just trim it off. And I feel like that's going to make my life so much easier in terms of just making nicer looking buttons. But I'll talk. They're like very different too. You can never like necessarily predict that, like what that line height will actually look like.

• 21:14Wes Bos?

  No, sometimes I get like a sometimes they get a font and the line height is just wacky. And you just have to account for that when it's that font. But then if it's a font fallback, it's it's a little bit more weird. So I'm very much looking forward to this. Let's talk real quick about browser support for that. Browser support is actually very good. It's been in Chrome for, oh, February 3. Man, it just hit Chrome.

• 21:42Scott Tolinski?

  Yes.

• 21:42Wes Bos?

  Like a month ago.

• 21:43Scott Tolinski?

  Yeah.

• 21:44Wes Bos?

  It just hit Safari.

• 21:47Scott Tolinski?

  In a December 2024.

• 21:49Wes Bos?

  And that's not in Firefox yet, but this is another one of those like nice to haves. Where it will, it's kind of like the new color spaces as well. It just looks better on browsers that support it, but it's not like it's going to totally break.

• 22:04Scott Tolinski?

  Yeah, Firefox, come on. Between this, they're like new privacy stuff or whatever. I mean, Firefox has been a bit of a bummer for a bit for me, so I just, yeah, a little annoyed with it.

• 22:18Wes Bos?

  Yeah, but that's in all the other ones. It's, it's actually really funny that Safari is often the first on these things when it has to do with design and presentation. Yeah.

• 22:31Scott Tolinski?

  Color and font and yeah, all that stuff they're, they're in on. And then they're explicitly stubborn about many other things and I wish they weren't.

• 22:40Wes Bos?

  Yes.

• 22:40Scott Tolinski?

  Yeah.

• 22:42Wes Bos?

  All right, I think that's, that's all of our little nuggets for CSS fonts. There's obviously a lot more to it, but these are things we think you should know. Anything else to add there, Scott?

• 22:52Scott Tolinski?

  I don't know, nothing.

• 22:54Wes Bos?

  Beautiful. All right. Thanks for tuning in. We will catch you later. Peace.

• 22:59Scott Tolinski?

  Peace.