Mastering Fonts in Next.js: Local Fonts, Google Fonts, and Best Practices

maybe not the most riveting discussion when it comes to web development but today we're going to discuss optimizing your fonts within next.js so I'm going to cover using Google fonts using local fonts so fonts that you download and keep in your project and then also a couple of different things that I think are really good to know regarding preloading and reusability when it comes to your fonts within next.js now just as kind of a housekeeping up front I did create a project here within vs code that I pushed up to my GitHub that is going to be like a starter project that you can use to kind of follow along with this if you'd like and it's going to be at github.com forward slash Cod Ryan Salomon forward slash next font so you can clone that run npm install and npm run Dev and then you can see this up on logos 3000 if you'd like to follow along with this but Nexus has a package called Next font and this package when you use different functions that you import from this package it will automatically optimize your phone so it does this by removing external no requests improving privacy and kind of the way that this works or the way that they automatically do this is when it sees a font file that you import from rule fonts or that you have locally it will automatically self-host these files and then this will help kind of prevent layout shift and it will improve the loading of your fonts as like cumulative layout shift is one of those Google or web vitals that allows your site to rank better and improves the overall experience of your site so this will help out with that and then also this next to font Library allows a really easy way to work with Google fonts and CSS and font files are downloaded at a build time so like what I just mentioned and self-hosted with the rest of your static assets meaning no requests are sent to Google by the browser improving performance so let's go ahead and move to Google fonts here and show you kind of how this works so this looks like a lot of tech steer it's actually not not too bad so within the next font Library you also have a Google package that will automatically self-host any Google font it will be included in the deployed code and like I said before no requests are actually going to be made to the browser you're going to just do this at build time so if we go to my project here and I open up my Google fonts folder and I go into my layout.js file if you have no idea what I'm doing here when it comes to layout.js and page.jsx you can probably still understand this tutorial but it might be better to have just a rough understanding of how nexgis Works which I have other videos on but within my Google fonts route segment I have a layout.js file so this is going to apply this kind of layout here to this Google fonts page and this is the page that you are seeing within my web browser here and you can also see this has a little bit different of a font compared to my home page and just to prove to you that I'm not lying we're going to use the inspector we see that this font is public Seance here but then if I go to my home page we see that this font is enter so there are two different fonts here so let me now show you how I did this so coming back to my layout.js the way that I can set this font for this specific route segment and later we will cover setting your different fonts for a route same in versus an individual page versus like your root layout but for this route segment I'm setting this specific font so let's go to my layout.js and within this page you can see that from next forward slash font forward slash Google I'm importing public Sans so the name of the font that I want to use Now when using this this is actually importing a function so for me to actually use this font I need to call this function and I need to pass it a couple of different options so by default I'm passing it a subset which we'll cover this in more depth here in just a second I'm using the subset of Latin and then I'm also just setting display Swap and then to use this within my application I can set a class name to my public Sans this is the return value of calling my public Sans function imported from next four slash font forward slash Google and I can access the class name there so this is going to apply this font to this div right here so this is how I'm using this public Sans font here now next.js recommends using a variable font from Google fonts and you can see variable fonts by going to fonts.google.com forward slash variable fonts so here we are at variable fonts and you can see these are all the variable fonts so these fonts they are just going to be a bit better optimized for the web and improve your performance a little bit so nexjs recommends using one of these fonts if possible within your application now if you don't use one of these fonts then you need to specify a font weight so for example Roboto is not one of the variable fonts so here we need to specify the font weight so if I want to use a Roboto instead then I can import Roboto from next forward slash font forward slash Google and then to use this font I need to call this Roboto function but I need to pass a weight to it so as a property to the object that I pass into this Roboto function I pass away in here I pass 400. now if I wanted to support multiple weights of this Roboto font then as I say here I can pass in Array here in which I could pass the values of 400 and 700 and I will do that now so instead of just passing 400 here is my weight I could do 400 and 700 so I'm supporting these two different font weights here and this is because this is a non-variable form so I need to set my font weight here and then to use this I could just do Roboto Dot classname and that's going to apply that to this page so if I come back here and I inspect and maybe I should have used some like fonts that are easier to tell the difference between but you can now see when I inspect this that this is the Roboto font being applied here now Google fonts they are automatically subset so I mentioned this earlier but to kind of get into this a little bit more subsets reduce file size and improve performance however you need to specify the subsets you want to preload so if you don't specify these I believe it gives you a warning and you can learn more about subsets by going to fonts.google.com forward slashing knowledge forward slash glossary forward slash subsetting but the kind of tilddr of this page is that these Google fonts since they're automatically subsets they are going to provide these kind of custom glyphs so like the letters with little asterisks over them I guess those are glyphs but they kind of provide these and when using these it optimizes file size for or what font and they provide some other different benefits when using these subsets so these are several different scenarios that they outline here when subsetting is desirable but I think for the most part it's a good thing that by default they use these subsets so to see this in action you can see that's why I'm defining subsets Latin for both of these and if you wanted to support different ones you could just pass those in to this array here but you can also support and import multiple fonts and there are a couple of different approaches that you can do this the first approach is creating a function that exports a font Imports it and applies its class name when needed so if we wanted to support multiple fonts the way that we could do this is instead of doing both of these Imports right here what I could do is I could create like a another folder here just called the fonts and I will create a font.js file and then let me go back to my Google fonts I'm going to go ahead and copy both of these paste those into my font.js file and instead of doing separate Imports here I can just import then within the same important and pull those bold out of the next forward slash font forward slash Google and then instead of just creating these constants here what I can do is I can actually export these constants from this file and then instead of what I'm trying to do here I can just import these fonts to this file so I'm going to remove all these but now I'm going to import real Botto from forward slash font forward slash font so I'm importing this locally now instead of from Google fonts and this should still make this font Roboto here so if I inspect it's Roboto and then if I wanted to use my public Seance font I could do public Sans and then use that here and then come back to this page and yeah you can see that it does look a bit different so now it's public sand so if you want to use multiple fonts you could just import those in this is probably how I would do it I would import it into just like a kind of font helper file import them and Export them separately and we'll cover this again when we touch on reasonability later because there's an important point that we need to talk about when it comes to that but that is how you can use some multiple fonts and alternatively to that if we didn't want to Import and Export these we could create a custom CSS variable and use our font by just using CSS so we can set a variable within our imported font and then use that within a CSS file so let's actually go ahead and do this now so let me come back and instead of exporting these what I can actually do here is I can set a property when calling these fonts I can say variable and then I'm going to set this variable to hyphen hyphen Roboto hyphen font and then I'm going to copy this paste this in my public Sans font and then I'm going to do public Sans font so now I've created these here but to use those what I can do is so right now we just changed it to public sand so let me copy this Roboto font and let me go to my globals.css and within globals.css what I can do is how about just like for my paragraphs here I will go ahead and use paragraphs are going to be font family and I'm going to do VAR so this is how you use a variable in CSS and I'm do Roboto fonts but now within this layout here instead of doing publicsane.classname I need to do public Sands dot variable and then I also need to add my Roboto variable so the way that I can actually do this is I can pass in a template string from JavaScript and then I can do dollar sign curly berries around this one and then I can pass in dollar sign curly brace and then I can do Roboto and I need to import that from I don't know why I removed these exports here I still need to export them Roboto dot variable here so now I'm exporting these variables globally and since I've added them to my CSS here I should now see that my paragraph is Roboto so if I look it is Roboto and then if in my Global CSS I use what did I call it here public Sans font so I'm going to copy this go back to Global CSS and do public Sans font and then come back you see that this is now public Sams so if you want to use CSS variables then all you need to do is within your call to your fonts family you pass in a variable property and then you set whatever CSS variable that you want to use and then within your kind of a root to class name you can pass in your public Sans dot variable or your Roboto dot variable or whatever font you called that function with DOT variable and then within your CSS you can do VAR and then pass in the name of your variable here so that is how you can use multiple fonts with Google fonts now we also have local fonts so with local fonts and you can see I used a very different font here to make things a little bit more clear you can download a font nextges recommends using your variable font so I would recommend downloading a variable font and then use the local font function from next to forward slash font forward slash local and provide it the path to your downloaded file so what I did here is I went to Google fonts then I went to this bezly font family and I downloaded it and then after downloading this font I just added it to my project so if I come back you can see that I have a static fonts folder and I just added this bezily hyphen bold italic.ttf and then within my local fonts layout here what I did is I imported local font from next forward slash font forward slash local and I called this function similar to what we did with Google fonts I pass in an object and then I just need to set an SRC that is the path name to my font that is in my local files here so this is the path right here to this font right here and then to use that very similar to what we did earlier I just set a class name to whatever the return value is from calling a local font I use that object and then I use dot class name and that's going to apply that to my layout here within my local fonts page so you use these very similar to Google fonts but the difference is you call the local font function from next to forward slash font forward slash local and then your SRC is just going to be the local path to that font now a couple of final things regarding fonts on preloading and review so uniform function is called it is not globally available if it's called in a specific page it is pre-loaded on the unique route for that page if it's cold within a specific layout it's pre-loaded on all routes wrapped by that layout if it's called in a root layout it's pre-loaded on all routes so let's go back here and for my Google font since I use these functions within my Google fonts route segment if I had more route segments within Google fonts like Google fonts forward slash settings Google fonts forward slash whatever then these fonts are going to be pre-loaded or all of the pages within this route layout but if I only call these functions within a specific page it's only going to preload those for those specific page but if I call them in my root layout within next.js then anything kind of cold within here and you can see this enter font is called within my root layout here this is going to be applied to all of my different route segments and pre-loaded before all those were out same now I already touched on this next thing a little bit as well when using the local font or Google font functions a new instance of that font is hosted for your app so if you use these functions Within separate files well you're going to have multiple instances of this next.js it doesn't automatically like dedupe these fonts if they're the same fonts like you could have multiple instance of these in separate files if you call these functions in separate files so if you load the same font in multiple files next.js recommends you call the font function in one shared file export it as a constant and then import the font in the files it's used which is what we have already done here so within my Google fonts here I wanted to use a couple of different fonts within this file so I wanted to use public Sans and Roboto so I created this font folder imported both of these fonts and exported them and then I used them within layout.js now what if I had multiple multiple specific pages that I wanted to use this Roboto font well I could just import that Roboto font into my page for Google fonts here into my page for local fonts here and I could use that font Within These Pages it would be kind of a bad practice if I did something to where like I used import Roboto and I called this robot a function if I did that Within this Google fonts page and if I also did this within this layout page that's creating two separate instances of this Roboto font I probably wouldn't want to do that that's just adding more load that we don't need to have instead create a shared folder or a shared file here import that font and Export it and then I can just import that font from that shared folder to wherever I need to use it alright so that's kind of how you can get around having multiple instances in improving your reusability here within your next.js fonts so there's actually quite a bit here with font but thanks for tuning in to this hopefully you learned a ton and I'll see you in that next one

Channel: Code Ryan

Views: 1,778

Keywords: coding, programming, frontend engineering, code, software engineer, javascript, web development, next js, react js

Id: WAl7Z2KHUzY

Length: 18min 44sec (1124 seconds)

Published: Mon Oct 02 2023