CSS Fonts Fallbacks, Variable and Trimming

Welcome to Syntax. Today, we're gonna 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 JS always is Wes Bos. What's up, Wes? Hey. Yeah.

Fonts are a never ending well of of sort of digging into it, both in CSS. And then once you get into, like, custom fonts and 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 JS a developer should know about, especially a lot of these sort of newer features that are either now supported or are are coming relatively soon.

Before we get started, let's, talk about, actually, Century just released their own font. Did you see this, Wes? Yes. I did. What what's it called again? Damn it, Sanity, I believe. Blink one eighty two reference here. So, yeah, go check that out. We'll have a link to that in the show notes. Looks nice, actually. That's, it's kinda cool to have your own typeface at a company. Right? Yeah. What a what a cool thing to to that. That was part it was a Hack Week project, and they went ahead and started using it

on Yeah. I think that they they're using it on, on the merch store as well. I didn't realize that when we redesigned the Syntax merch store, it's available at century.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 gonna be talking today has to do with, like, font performance as well. If you've got, like, layout shift, you're gonna see that in your century performance tab as well. So you certainly don't want layout shift because of your fonts, and we're gonna tell you how to fix that today.

Yeah. Totally. Cool. Well, if you wanna check out the century font, do it. But I highly recommend you check out century as a product at century.i0/syntax.

Send them to 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 century dashboard.

I even used their wizard the other day. In fact, they have a wizard for several platforms, and the wizard for getting century going on SvelteKit, man, just run the wizard, and then that's it. You can't The Next. Js one is also

fantastic as well. It just because there's there's client Node. There's server side. There's edge. There's, like, three different run times. They all talk to each other, and it's it's very good to to get integrated.

Yeah. Gotta love that. Okay. Cool. Yeah. Well, let's let's get going here. The first thing we wanted touch on is, you know, we have FontFase for defining, custom fonts. Before we had at font face, you had a choice of what, like, six fonts or something on the Wes, 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 phase. 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?

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, etcetera, etcetera.

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.

Often, that's a really good choice for, 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 kinda three different periods. There's a blocking period in which the font is being download 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 a that's called the blocking period, and you kinda wanna minimize that because it's annoying, to sit there and wait for it to download.

Yeah. And one of the reasons why you do have to wait for it to download is fonts are not small. No. 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 font. Fonts are not are are not small Node. So Yeah. That could be a period of time, especially if you're loading it in a slow manner. Yeah. Yeah.

So we have the block period, which it attempts to download the font and and shows you nothing. You have the swap period, which is the amount of time that it uses a fallback or 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 it's not working at all. So what you wanna do is set your font display to either you probably don't wanna 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 wanna you wanna block and wait for the file to be loaded. That fine. Yeah. 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 when 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, right, the the cumulative layout shift or or the rude rendering of the actual font. 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. I guess the big question for me is why doesn't auto just take care of these situations? It does. That's exactly what auto does JS it the browser will decide based on, assuming things like network speed, device, etcetera, what the best use case is for the user because you JS the developer cannot possibly account for every single use case. So auto is probably your your best bet.

Yeah. Word. Now the swap. Mhmm. 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 ESLint. 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 gonna happen is the the text is gonna 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. Yeah. Start over. You you can use the ascent override, ESLint override, and line gap override values Wes you can basically take something that is loaded on the user's computer.

So for example, you would say you can say local Vercel, and that will load up aerial 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 the font that you're trying to Node. And those values can be figured out. Next. Js font Nuxt Fontaine will automatically do that. That's why that's why when you use Next, they want you to use their own font integration rather than just loading it in a CSS link and 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 Next. Js uses. Font kit will basically look at your font during build time, measure these values, and then set your fallback font to stretch to to perfectly fit that. Interesting. Yeah. Yeah. So here's here's an example. At font face, it's called fallback for Poppins, which it falls back times in Roman.

It stretches the ascents a 5%.

It's, Scott stretches, compresses the descents 35%, and then overrides the line gap between the two so you don't get that jarring change.

Man. That's great.

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

Have you heard of this Fontaine?

It's an Un JS package. Yes. That's what that's what Next uses, and they're recommending it on the Google blog here. Yeah. Yeah. Cool tool here.

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 sorry. I just said you have to have it 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. 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. They have variables. Yes. 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 a sliding scale of how bold this is. But not only, like, boldness and italicizing things and and that, you can also get into individual modifications of individual glyphs, like the font that we use 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 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? 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 w h, w g h t and then a number or italicized can be either like a a sliding scale or a zero to Node. But every font is just a slightly different in what they offer.

And, that's why there's this really great tool that Steven Nixon showed us on our episode where we had him on talking about building fonts, which is the Wakame Node.

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 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. Yeah. It 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 Deno, and it's from a hundred to 900. And depending on where you're at, the size of the hat and the eye angle are are changed, which is is hilarious, or, like, how wide the stroke is on something. So variable fonts can be multicolor as well, which is kinda interesting.

Look at this pnpm. X-ray.

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. Mhmm. 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. 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, I just we have, like, a 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. Oh,

this?

Sorry. It's the I.

The I is the one that I changed. If you look at the like, my Node, 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.

That is awesome. I love that. You can simply just change out one of the letters because often these fonts are Yarn they're kinda 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, Yeah. Yeah. It looks like a little guy running. I know. Right? Yeah. I know. It was so fun to go through that because some of them did look kinda like a little l or you could change them and stuff and, just really nice. You know? 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 it really depends, I I guess. Hey? I would say they're almost always larger, Specifically, I mean, unless you're, like, dealing with the loading in three weights?

Well, that's the thing. Yes. So, we were doing that on the syntax site. We were loading in several weights of the font, several Okay. Like, italic weights and whatever.

And I don't know if the end cost ended up saving us Scott at the end 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, we could just load one file. Right? Yeah. Then the world's your oyster. Because, like, I on my website, I've got,

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 Node? 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. Yeah. So then yeah.

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. Yeah. For sure. Yeah. Variable fonts, super cool.

And, Wes, also, you said you were looking at this v-fonts.com.

I don't know if you said that explicitly, but Oh, yeah. Sorry. .Com JS a really cool website too. Not only just 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 Oh, yeah. That's You could do a lot of creative work with them.

Animating the, like, weight of Yes. Specific letters while the other letters are less, you can make this really cool kind of wave Yeah. Wave animation. You know? Look at this Node. Corona face impact.

Somebody changed the bags under the eyes, how big the beard is, and Oh my god. Whether or not there's a face mask.

That's hilarious.

Wow. 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, three d modeling right now, and I often think about areas in my life where I'm like, I have never in my life 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.

Go 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.

That would be really cool.

Last thing we wanna talk about is this new property to CSS that is, text Bos trim and text box edge.

And if you are someone who GitHub 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 gonna 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 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 the x height, which is the the height of an x, base height, ESLint, or descender line, which that's, like, Latin characters. Once you get into, like, Chinese characters, it's it's even more wild.

Yeah. You know what? One of the the the biggest things for me that this will solve is, like, Ben, I get so angry doing padding for buttons because you're like, okay. The top just needs a little bit different than the bottom. That looks weird. You gotta get in there and fine tune it. Yeah. It looks weird. So just trim it off, and I feel like that's gonna make my life so much easier in terms of just making nicer looking buttons.

But all fonts are, like, very different too. You can never, like, necessarily predict

that, like, what that line height will actually look like across Sometimes I get, like, a sometimes I 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 it just hit Chrome. Yes. It just hit Chrome. Yeah.

It just hit Safari

In the December 2024.

Yeah. Scott in Firefox yet. But this is another one of those, like, nice to haves where it will it it's kinda 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. Yeah. Firefox.

Come on.

Between this and their, like, new privacy stuff or whatever. I mean Yeah. Firefox has been a bit of a bummer for a bit for me, so I just yeah. I'm a little annoyed with it. Yeah. But

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

Yeah. The aesthetics. 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. Yes. Yeah.

Alright.

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?

I don't. No. Nothing.

Beautiful. Alright. Thanks for tuning in. We will catch you later.

Peace.