00:00:02 As every website has a different theme, most of them also have different fonts.

00:00:06 So if you try to compare this font right here of the heading, you'll notice that it's a bit different from the one that we have right now.

00:00:13 The current font we're using is specified in our layout.tsx.

00:00:18 It's the Geist Sans local font, but that's not the one we want to use.

00:00:23 So we want to use a font family that's specified in the Figma file.

00:00:27 And this one right here is the Interfont.

00:00:30 I think we can see it right here under Typography.

00:00:33 So head over to Google Fonts and search for Inter.

00:00:37 Click Get Font and then Download.

00:00:39 Once you unzip it, drag and drop this one right here under Fonts.

00:00:44 It is the one that ends in wght.ttf.

00:00:48 And we can rename it to something more meaningful.

00:00:50 So let's go ahead and do that.

00:00:52 I'll call it intervf.ttf.

00:00:57 We can also delete the two fonts right now in the fonts folder and we can put inter to use.

00:01:02 So we can use it right here by renaming this one to inter.

00:01:07 Use the local font and then simply pass a source to the dot slash fonts forward slash intervf.ttf.

00:01:15 We can give it a variable of dash dash font dash enter.

00:01:20 And we can use all weights, 100, 200, 300, 400, 500, 600, 700, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800,

00:01:43 We also need to modify our tailwind.config.ts.

00:01:46 Right below the screens, we can say font-family, say enter, and specify it as var –font-enter.

00:01:59 Now we can use it within our app.

00:02:01 So I'll keep the current one, but I will wrap everything in an empty React fragment, just so we can show two elements, one after another.

00:02:11 There we go, we have the initial H1 right here, and right below it, I'll duplicate it, and I'll change the class name to H1 Bold,

00:02:21 but I'll give it font Enter.

00:02:23 And I'll say, welcome to the world of Next.js, and put Enter right here in parentheses.

00:02:29 Now, if you check them out, they both seem to be the same, right?

00:02:33 So why is that?

00:02:34 Well, we can only keep one, right?

00:02:36 Because they're the same.

00:02:37 So if you head over to globals.css, you can see that we're already specifying that all fonts within our body have to have the font enter.

00:02:46 So we're good.

00:02:47 We don't have to mention it using a variable.

00:02:49 But I want to quickly talk about this local font functionality coming from NextFont Local.

00:02:54 It is pretty cool because it allows you to eliminate external requests to font providers like Google Font or Next.js Font and significantly improves site

00:03:05 loading times and performance.

00:03:07 Think of it as self-hosting your own fonts right here within your code.

00:03:11 Now, if you go back to Figma and scout some of these components, You can notice that for our logo, we're using a different font.

00:03:20 Space Grotesque.

00:03:21 Do you think you'll be able to install it and use it on your own right now?

00:03:24 Pause this video and go through the process alone.

00:03:27 Do it right now.

00:03:27 But anyway, whether you succeed or fail, I'll lead you through the process of installing another font one more time so that you truly know how to install

00:03:35 all the fonts.

00:03:36 I'll head over to Google Fonts, search for Space Grotesque, click Get Font, and I think we already got Enter, so I'll just get Space Grotesque,

00:03:46 download it.

00:03:47 I'll unzip it and drag it into Fonts.

00:03:51 Rename it to space grotesque vf.ttf.

00:03:58 Go to the layout, duplicate the interfont, call this one space grotesque, point to the space grotesque file path, change the variable to font-space-grotesque.

00:04:14 Make sure it's the double dash at the start.

00:04:17 I think we'll only need from 300 up to 700 in this case.

00:04:22 And I'll go down and apply its variable right here by saying space grotesque dot variable.

00:04:32 The inter font will be used almost everywhere, whereas the space grotesque will be used just for the logo.

00:04:37 So we can keep the space grotesque as variable and I'll set inter as class name.

00:04:43 That way it'll set it as the default font of the application.

00:04:46 Now we can head over to tailwind.config.ts and add the space-grotesque font right here by setting it to var.

00:04:56 dash dash font dash space dash grotesque.

00:05:00 We can go to our page, duplicate it, and call this one as space grotesque, or rather font space grotesque.

00:05:10 And if you go back to your application, you can see the difference in the font.

00:05:13 And if you want to learn more about setting up multiple fonts and just optimizing fonts in general, I would highly recommend checking out the Next.js documentation page.

00:05:22 That further explains how we can set up multiple fonts.

00:05:25 But for now, I'll teach you everything you need to know to make it work within this app.

00:05:29 So that's it.

00:05:30 Now you know how to add new fonts to your application using Next.js' local font functionality, which allows you to simply get them from your own code base.

00:05:40 Great work.