There are a number of ways that you can use custom fonts within next js. You can use the classic approach of loading the fonts from an external service like Google Fonts, but additionally, we will also cover how next JS provides even more optimal ways for using fonts to demonstrate how you can use fonts within next J, we have a very simple page that displays a lot of text. Let's first take a look at how we can embed fonts hosted on third party services like Google fonts. I have chosen a very famous font over here, which is reo, and then I'm going to click get embed

code for using this font. Within our website. Google recommends two things. First, we need to add some link tags within the head of our document, and then we need to set the CSS property for family to Reto, along with the fallback, which in this case is crif within next JS app router. If you want to add something to the head, one way to achieve that is by simply rendering the head within the page layout component within the head. We are going to paste in the link tags that we just copied. These link tags are going to load the reporto font family from Google Servers. Now, if you want to use this font anyway within our

application, all that we need to do is to set the font family to re reporto along with the set fallback with these changes in place, if we jump into the browser, you might not realize it, but you are looking at Otto right now. A thing worth pointing out is that there is going to be a delay of these font files getting loaded from a third party server. To demonstrate that, let's go ahead and take a performance recording of our application. Within this performance profile, we also enable screenshots, and within these screenshots, we can actually see that the page shifts layout as the font gets loaded. Although the shift is quite fast,

within this particular case, we had to really slow things down in order to capture it. It can be a bit more worse on bad networks, slower devices, and more complicated websites. Next years comes with a font system that allows you to automatically self host any phone file that you find on Google phones. Next, yes, will download the file during bill time and bundle it as a part of your application. This has a number of advantages including performance improvement due to co-location, preventing layout shift with smart CSS and privacy as your users, browsers aren't making requests to external servers, you can use exports from next font.

Google to use a font that you would normally find on Google Fonts, for example, to use reo, simply bring in REO as an import from Next Font Google. Next, we have to create an instance of the font, which allows you to narrow it down to a subset of IT features for even further file size optimization. Here we are saying that we only want to bring in the Latin characters for this font and just the weights 400 and 700, and we can actually remove the weight option for fonts that support variable weights as they don't need different character definitions for different weights. And that's it. Now that we have the instance

of the font created anyway, we want to use the font. We simply use the instance class name and assign it to the class name of a dorm element. With these changes in place, if we jump into the browser, You can see that reporter has successfully loaded and is being used to render out our text. Now, in this example, the font is going to be served from our web server, so theoretically it should perform better than the Google font version. So let's just run a quick profile and try to scroll through it, and you can see that there's no portion in this profile where we can see a layout shift happening because of fonts. Next, yes, also allows you to easily use local font files

that you can add into your project. To demonstrate that we've created a fonts directory within the app folder, and this directory contains the font file for a font called Super shiny. Now, let's use it within a simple page component. In order to use local font files, we bring in the default export from Next Font Local. We can use this local font method to create an instance of the font that we want. The only thing that we need to provide is the SRC prop, and it is going to be the relative path to the font file With this instance created, we use it the same way we use Google Fonts. Whenever we want to use this font family,

we simply use the instance dark class name property. And now let's jump into the browser and see if this font is loaded. And as you can see, it is super obvious that the text is using this new font.