CSS Fonts Fallbacks, Variable and Trimming

rather than just loading it in a CSS link and and going for it.

and then

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, just really nice. You know? Love that.

It stretches the ascents a 5%.

which it falls back times in Roman.

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

Fontaine?

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

possibly

these values,

the user's computer.

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 variable fonts will allow you to change the weight without changing the size of 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 And then fallback gives you a small blocking period and a short swap period, meaning that 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 will allow you to trim off that extra space on the top or the bottom, and then text box edge to sit there and wait for it to download.

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,

what the best use case is for the user because

which is part of maybe the challenge of working with them. They have variables. Yes. Necessarily approach

and then will allow you to specify assuming things like network speed,

which is the amount of time that it

they do. They have variables, which is as programmers, we love variables. You can change them. You can update them. Whatever.

you're never gonna do that stuff unless you have a tool that is built into your your build chain. Yeah.

compress ESLint size Node different formats and and and source set multiple versions of it. You know? That stuff is the So we have the block period, which it attempts to download the font and and shows you nothing. You have the swap period,

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

something that is these situations? It does. That's exactly what auto does JS it the browser will decide based on, 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, and the eye angle are are changed, which is is hilarious, or, like, how wide the stroke is on something. So

it's gonna swap over to.

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 That is awesome. I love that. You can simply just change out

and that will load up aerial that's loaded on your user's computer, and then it will stretch 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.

do that. That's why that's why when you use Next, they want you to use their own font

if you were to 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.

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,

will automatically on the font. So text box trim

And with variable fonts,

Have you heard of this 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

are have different characters,

loaded on

swap it out once it's done downloading,

Okay. Cool. So next up are variable fonts. Now variable fonts are interesting because

But that can be kind of jarring And and I'm wondering if there was a variable version of that available where those trimming lines happen,

what you wanna do is set your font display

Man. That's great.

I don't. No. Nothing.

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.

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, which

GitHub

And then they're explicitly stubborn about many other things, and I wish they weren't. Yes. Yeah.

who 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,

yeah. I'm a little annoyed with it. Yeah. But

Come on.

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 kinda three different periods. There's a blocking period in which the font is being download 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? Peace.

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? the the, like, the line height of a font

oh, February 3.

Man, it it just hit Chrome. Yes. It just hit Chrome. Yeah.

you're gonna be very, very happy about this because

and font and, yeah, all that stuff they're they're in on.

Between this and their, like, new

like, padding or spacing and margin account for every single design and and presentation.

Safari like, weight 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.

Alright.

doing padding

And if you are someone preset, meaning that it's not like, oh, fonts can have, 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, they are generally 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? Scott stretches, compresses the descents 35%, Yeah. Scott in Firefox yet. But this is another one of those, like, nice to haves

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

either by the ascenders, the cap lines, the the the x height, which is the the height of an x, base height,

if you don't have any characters

browser support for that.

that's, like, Latin characters. Once you get into, like, Chinese characters, it's it's even more wild.

In the December I just

So I'm very much looking forward to this. Let's talk real quick about swapped to and then once it's downloaded, the font that you're swapping back to

and Oh my god. Whether or not there's a face mask.

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.

these are are a really good choice Fonts are a Yeah. This is kinda like the, like, images. You know, like, you with images, you have to, like,

and text box edge.

Node.

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 with

we were doing that on the syntax site. We were loading in several weights of the font, several Okay. Like, italic weights and whatever.

modifications of individual glyphs,

things and and that, you can also 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.

changed the bags under the eyes, how big the measure But when you define a custom font, Wes you can basically take in Scott's case, not fancy enough.

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

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,

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 Browser support is actually very good. It's been in Chrome for,

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

Sorry. It's the I.

Look at this pnpm. X-ray.

Wow. I need to I need to make a font. That's just, like, one variable fonts can be multicolor as well, which is kinda interesting.

and it's from a hundred to 900. And depending on where you're at, the size of the values that you can change It just hit overrides the line gap between the two so you don't get that jarring change.

That's hilarious.

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

many of these 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, change the width of the text, and that would cause a reflow.

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 like the font that we use on Syntax, MDIO.

on that page. Yeah. So then yeah.

settings property. And inside of there, you give it, like, a key and then a value. So for the font weight is w h,

That would be really cool.

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,

text Bos trim layout ESLint. Meaning that if the font that you 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.

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,

You can set a a value Can you maybe get a little deep into what font display is?

bolder without changing the actual size of your text. Mhmm. Because if if you were to make a font bolder, they would often Look at this Node. Corona face impact.

That's that's so fun diving into all these fonts. The font size, I guess, like, we talked about loading them, but

get into individual

And,

It has one, two, three, four, five, six different possible 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

Yeah. CJ and I did that.

one of the letters because often these fonts are Yarn they're kinda fancy, you JS the developer cannot 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, this? to either you probably don't wanna set it to block unless you're explicitly

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.

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

variable fonts, you have this font variation

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,

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,

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

Somebody integration

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, you could use Helvetica and have a fallback to Arial or something like that. And people who had a Mac would get Helvetica.

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.

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

Whereas

fallbacks, and so much more stuff that,

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,

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.

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.

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.

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,

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.

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,

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.

I think everybody

that they were using this, this custom font. I remember being like, yeah. I really like this 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 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 Last thing we wanna talk about is this new property to CSS that is, hat

display.

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

to figure out what the best case was.

what do you do if you're trying to use a custom font, Yeah. The aesthetics. Color So for example, you would say you can say local Vercel, how long it should wait and if it should wait ESLint, or descender line, Beautiful. Alright. Thanks for tuning in. We will catch you later.

But along comes at font phase. We can load up our own custom fonts. We can use our fonts. And along with that,

SvelteKit, man, just run the wizard, and then that's it. You can't The Next. Js one is also w g h t and then a number

defining,

People who had a Windows would get Arial and then, you know, whatever.

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 beard is, immediately swap out.

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 Well, that's the thing. Yes. So,

font for buttons because you're like, 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 privacy stuff or whatever. I mean Yeah. Firefox has been a bit of a bummer for a bit for me, so I just

you need to also define for when you need to make things It's,

we have a lot of other things such as, Yeah. You know what? One of the the the biggest things for me that this will solve is, like, Ben, I get so angry

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.

Often, obsesses over, 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.

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.