Astro's new Fonts API

Web fonts seem simple, but there's a lot of little tricky parts. You might think I can just throw in a Google Fonts script, and everything will be fine. True, but there's a bunch of privacy concerns, data concerns, and DX concerns. So, we're going to talk about all that today when we look at Astro's brand new font API. You ready? Let's go. [music] Hey, what's up? My name is Chris and welcome to Coding in Public. Okay, so like I mentioned, there's a bunch of little tricky things to figure out about fonts. First of all, do you want them local to your user's device even when they're offline for like a progressive web app? Do you want to download more than you need or just the Latin characters that you might be using? Do you want to make sure that you're not sending your users's IP address and other sensitive information to Google every time they're downloading those fonts? Do you want to make sure there's nice fallbacks that even prevent layout shift? All these little tricky parts are handled seamlessly by Astra's new font API. So, today we're going to look at all the little configuration details as we do this brief overview of what's available. I'm going to follow basically the docs right here, but I've simplified it all in this little site that I'll be walking you through today. All right, let's first of all talk about what happens if you pull in fonts from something like Google. We'll talk about several different things that you may need to just be aware of. You can see I'm pulling in three different fonts here. And the first thing to note is that when you do so, I've got cache disabled here, but as I refresh, you'll see I'm pulling in all of this right here. These are the CSS files that may be needed to be used. And it will only load the ones intelligently that I need. But even so, I'm pulling in all this stuff. I'm also pulling in several different font files right here. So 35 kilobytes. Uh let's see, 15 and 31. So that is another thing to note is how much you're pulling in. You don't really have a lot of control over that. But the real danger of pulling all this in directly from Google when somebody visits your site is that you send along your user's IP address, the URL that's requesting it, and a bunch more about your user. The second thing to know is you get no real type safety. So, if I jump over here and I've got instrument serif. If I misspel this for some reason, you'll notice that it just now defaults to this sand serif, but it's just a generic sand serif. There's no real indication other than copilot telling me I misspelled it. So, you don't get any type safety when you're actually using it. Now, there's also other things to note. Usually, when you pull in something from Google Fonts, they will make sure that you're using display of swap, but if you don't use this, you'll see you actually kind of get a blank uh screen until that comes in. It's so quick that you can't quite see it there. But depending on your user's internet and whether or not you have display swap, it may actually just be blank until your font happens to load in. Top of that, you may have a bunch of content layout shift because your fallback font may not be optimized for the actual font you're using. And you can fix all those things in the Astro Fonts API. All right, so how do we use it? Well, first of all, I'm going to just comment out all this right here. And we set all this up initially in the Astroconfig.MJS. In fact, if you want to follow along, you can just see right here. So, I'm going to grab these fonts. We're going to pull in all of these here. We'll start with just notto sands. You'll notice that I have to actually pull in font providers. This is up in the astro config. This should come along as well. And by default, if you're using a remote source here, I'm using font source cuz it makes it a little simpler to work with Google fonts, but it also includes other fonts as well, but you need a provider. Then you'll need a name. And then you'll simply need a CSS variable. Now, even though I'm using this CSS variable here, I've yet to actually set it up in Tailwind, which is what I happen to be using, but you would do the same thing if you were using this like on the root of your document, just using standard CSS or something like that. So, right here, we would just replace this with var font notto. And I'm naming it that because that's what we named it right over here, font notto. Now, one of the cool things that Astro fonts does is you'll notice that in this file, it's actually pulled down the local files for uh font notto 400. Now, you can actually specify different weights that you need as well. So I'll show you that in a second. It is helpful and important here in the config to declare a fallback as well. So these can be specific fonts or in this case we could just do something like sans serif. But here when you build your site is when this request will be made. So we're still going to grab this from Google or font source in this case. But that will happen at build time rather than every time somebody visits your site. So you're not sharing your customers data with Google or other thirdparty services. Now we've got a couple other fonts here as well. So let me paste these in. There we go. So I pasted in the configuration for instrument serif and also jet brains mono. Of course we also need to update this to reflect the same. So let's update both of those as well. All right. So now we're actually correctly identifying these but I've yet to actually use them within the site. So you may notice over here these are still using the fallback fonts of serif and sans serif or monospace um respectively. So we've done one and we've done two. Now let's come in and add the font component. So just like this I'm going to drop this in anywhere where we're using it. So in this case, this would be the head of the document. Um, if you have like a layout wrapper, that would be the [music] best place to put this. We're just going to pull this in and from Astro and I'll copy down. Let's change both of those instrument serif and jet brains mono. So you can see immediately it refreshed and it's actually using all these local fonts. Now once again, it does this during build. So I'm pulling in all the fonts that I want. Now you can get really specific with what you want. And that's one of the things that gives you a lot of power here is in addition to identifying basic fallbacks, you can also add things like weights. For instance, you can say I want only these exact weights. So yeah, let's say like four, five, and 600. You can pull in specific styles as well. You can even pull in subsets. So instead of pulling in every single character, you're only going to pull in the Latin characters, which I think is the default. Anyhow, now there's a bunch of other things like formats, optimized fallbacks, different options, which I'll show you in a second. Unicode range variation settings for like variable fonts. So you've got a lot of flexibility over exactly what you pull in. And again, this is all done during build time. So the fonts are local to your site. So we've configured the font, we've added the font in our CSS. In this case, I happen to be using Tailwind. We've used the font component. And finally, here's where a lot of the customization comes in. So we've looked at weights, subsets, styles, and fallbacks per font. Now, let's talk a little bit more about local fonts and variable fonts. First of all, I've actually got a local font here. And you might say, well, isn't this local? Well, yeah, it is. But the idea is like let's say you have a local font to your system that maybe isn't with one of these font providers. I should mention there are a lot of font providers. Um if you do like this, you can see we've got Adobe Bunny font share font source Google icons local or npm. So what we're going to do in this case is use local. I'm going to pull this in. And as soon as you do that, you're going to see that you need to add a little bit more. So let me get rid of a lot of this right here. The one thing we have to add beyond the provider, the name, and the CSS variable is we have to have options if you're using a local font. Now, the reason you need these options is you have to tell it more about your font. You can see here I've got noto WF2. So, here you'd set this underneath a variance array, and here we'd have an object that declares our src. So, this can be an array where you provide the initial value and then some fallback values. So, if you had multiple different versions of this font, you could do that. You'd obviously probably want to start with the most modern one, which in this case is just the W ofFF2. I don't even know if there's a way to say that. If there is, let me know uh if I'm doing that wrong. Okay. Next, you need to or you can declare a weight and a style as well. Now, all the same options you had above also apply here. So, if you have different variants or things like that, you can do that. Now, the nice thing is this will actually use my local font here instead of like one of these from the font provider. All right, so let's back out of some of this just to keep it simple. Uh, so I'll leave this here in case you want to look at it. And let's move back to font source. And then the last thing I want to mention is how to use variable fonts. So let's copy this down. And this time let's mix it up. Let's use Google and let's use enter. And that happens to be a variable font in Google. And then we'll change this to something like enter. Fall back here. We're going to set this to sans serif. And then finally, because I have a variable font, I can use a variable declaration. So I can say like I don't know 100 to 900. So I've got the full range of fonts available to me. So to make sure we are using this, we're going to use the font enter over here like that. Okay. So now we should be using that enter font and I can change this up on the fly because I have all 100 to 900 available to me when I'm actually using it anywhere. I can change that as I want to. So here, let's just look at this top part over here. Let's keep it like really let's make it really big so you can see what we're doing. And I can come over here. We have semi-bold. I can change this to bold or I can actually mix it up even more specifically than that. So I've got 100 available to me. I can even do something like 150. I can just slowly expand it to get it to be exactly what I want. And it just naturally dynamically expands as I need it to. Now obviously you'd probably want to set this up so that you know you're not just doing this in line like this, but you can see how you've got the full range of fonts available to you. Now there's quite a bit more you can customize as well with all of this. So, I'd encourage you to look at like this granular font configuration. There's some important things to know about how it caches items. It gives you several default examples. So, for instance, you can say, "Hey, I want both of these formats." Even when I'm using something like font source, you've got this local variety here where you can pull in both types here, the regular and bold along with a lot more configuration options. here into the references you can see you can pull in different font providers the names CSS variable how that's used which names are valid here fallbacks how to set those optimize fallbacks so there's lots of different options here this optimize one is actually pretty cool because it by default it's true so we we haven't had to enable it but this gives you full control over how the fallbacks are generated and what they try to do is to make it very similar to your final font so that way there's not as much content layout shift which is another little nice thing you get just from using the Astro fonts API font styles weights, subsets. A lot of these we've already touched on very briefly, but you could even pull in specific glyphs if you like, like a certain a right now it's an experimental, but super cool to see that. Um, and a lot more details here. I trust this overview of the fonts API helps you understand what's available and also how to use each of the little parts in Astra's new font API. Now, if you like my style of teaching and you like Astro, you might also like my Astro course. [music] I've included a special discount code below and I'm updating it right now for version six of Astro, [music] including things on this font API that'll go a little bit more in depth than this current video. Okay, I'll catch you in the next one. Thanks for watching. Happy coding.