How to add the Multiple Local/External Fonts to our NextJS14 Project(or NextJS13)

Hi there,

Today I will show you how to you can add the not only single font but the multiple custom local or external fonts in your NextJS v14(v13). It is applicable for both the NextJS v14 as well as NextJS v13.

⁉️ And you guys might be thinking, why so long process to add the fonts, isn't there easier way?
Actually there is easier way, if you want you can simply add the font in the way that you add the font in the plain website built using HTML, CSS and JS. But here comes the font optimization part. As per the NextJS official docs - next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance.

Happy Coding :)

🔗 Some Important Links :
Link to my blog post - https://untitleddeev.com/nextjs/how-t...

💻 Get the source code from free (GitHub) :
https://github.com/UntitledDeev/NextJ...

🌟 GitHub :
You can follow me at GitHub :
https://github.com/ebraj

🕹️ Tech Stack Used :
1. NextJs V14
2. TypeScript
3. Tailwind CSS

⚔️ My Armors :
1. Macbook Air M1
2. Samsung External Monitor
3. Fantech (MAXFIT61) Mechanical Keyboard
4. Basic Mouse
5. Mobile Phone for Recording
6. Mobile Phone Holder

⏰ Video Contents
00:00 - Video Start
00:12- Workflow of adding the multiple local/external fonts in our nextjs project
01:10 - Folder Setup
01:50 - Step-01(Adding the local copy of fonts in project folder)
02:18- Step-02(Using the loader to load the fonts)
05:46 - Step-03(Adding the font variable in layout file)
06:55 - Step-04(Adding the fonts in the tailwind config file)
08:35 - Final Step(Using the font)

And if you love to see such more videos, please consider subscribing this channel  @untitleddev25