Using Fonts in Next.js (Google Fonts, Local Fonts, Tailwind CSS)

nexjs 13 is making using custom fonts way easier let's take a look I'll start by running create next app to set up a new next.js13 application we'll use typescript eslint we'll just use the defaults for now okay we can jump into this new directory and open this up and we'll open up our repository here it's just a standard nexjs13 starter template we can npm run Dev to start up our local Dev server and then in the browser we can go to localhost 3000 and see our brand new application now by default this is using the standard system font stack so I'm on Mac it's using the Apple system font here which is San Francisco this works pretty well but it's going to be different if I'm on Windows machine we want to have the same look and feel across all of our different devices and maybe we want to have a custom font that represents our brand so you might go out to Google fonts or another font registry like type kit and say okay I want to use the Roboto font now how do I actually get this inside of my application you can scroll down and pick the font weights that you want maybe you want to download load this file on your machine or maybe you want to say hey I want regular and bold so let's take this link tag and just throw it into the head of our HTML document so I pulled up our index route here on the left which is using next head to change the HTML head and add some meta tags now yeah I could copy paste these links put them in the head go open up my Global Styles and you know let's say we want to throw Roboto on here instead this technically works but you're going to notice that it comes with some issues the fallback font loads which is the system font here and then rubato is used now if you have a slow internet speeds for example if this was on 3G that would be a lot more painful than it is right now on fast internet further we have to make requests to Google fonts to actually go retrieve this external font file every single time wouldn't it be great if we could automatically self-host the Roboto font on our next JS server and automatically figure out what the fallback font should be so that it perfectly matches and has the least amount of layout shift well I have good news because that's exactly what the new font optimization inside of next.js does so let me just reset things back here I'll get rid of the Roboto font inside of my Global Styles and I can go back to our index route here and also remove manually editing the links inside of the head let's start using the new font optimization inside of nexgs 13. to start off we're going to go back to our terminal and we're going to install next font now this is a separate package because there's quite a few different Google fonts that can be included and we didn't want to put that all in the main next.js package so I'll restart our Dev server here we now have our new package and inside underscore app in the Pages directory we can actually import a font from Google fonts in this instance I'm going to use rubato we can define a new instance of Roboto here subset the font down to just the Latin characters again this could be different if you have a different language for example and we get to specify what weights we want so maybe we want 400 maybe we want 400 and 700 for example so now we have this instance of Roboto what we want to do is go down to our component here and we're actually going to wrap this in let's say a main tag or something like that and we're going to take roboto.classname and apply this auto-generated class to our entire document so if I go ahead and hit save here you're going to notice on the right here it is updated and we get our new font now if I open up our Dev tools I could actually go and inspect this font here I see that yes it is using Roboto it's got the funky class name here because it's the automatically generated one I can also go to our main element here and I do see the font family of Roboto as well as the fallback font added correctly into our document now this doesn't have to be Roboto this could really be any font from Google fonts that we want so if I go back to our underscore app folder I can change this to enter for example I could do IBM Plex I could do really any font that I want so let's do enter and I'll change this here as well too now this is a variable font so I actually don't even need to specify weights which I would recommend using variable fonts if you can it's also going to help you get the best performance so we can remove that we'll keep the subset to Latin and I can hit save and we see our new font file over here on the right or our new font being applied it's really that easy now while I only showed Google fonts here it's important to note that this could also work with a local font file too the import path looks slightly different and the way that you define your font is you have to have a source that points to where this file is at but it's basically the same thing one final note if you're using Tailwind CSS is that you'll want to actually use a CSS variable instead so let me just quickly show that on your font that you've defined you can use variable and then give a name for your variable so maybe we want font enter for example then on your class name here we're going to change this to a string template and we're going to say enter dot variable to apply that variable and then font Sands finally I would modify my Tailwind config to say hey for the font family for Sans just use the CSS variable of font enter also if you're using the app directory which is in beta this also works there as well too again it's pretty much the same thing but you're applying it to the root layout to have it work for your entire application all right that's all it takes to start using font optimization inside of next.js13 to get better page load performance as well as less layout shift give it a shot and let me know what you think by the way if you want to see more videos on mix.js feel free to subscribe give a thumbs up thanks

Channel: Lee Robinson

Views: 108,055

Keywords:

Id: L8_98i_bMMA

Length: 6min 5sec (365 seconds)

Published: Wed Nov 16 2022