Have you ever spent way too much time choosing the right font combination for your website?

You pick one font for the heading, another for the body, and maybe a monospace font for your code blocks and some how it still doesn't look nice. Well, today I found a really interesting tool called Font Trio that might solve this problem. It give you ready made combination of over 2,000 fonts designed especially for modern web projects specifically if you're using Shadcn UI. So let's try to use this.

So First create a new Nextjs project and just try to create a simple landing page. By default Nextjs uses Ariel font because when we create a new project it give us an option by default on the body font family is Ariel and serif.

So normally if you want to add or change the font you will go to google fonts right and you can search for any font or you can sort by trending most popular whatever and maybe you find a cool font there.

I'm going to use let say Google Sans. So if you find that you will go to layout and import the Google Sans right. You create variable paste that into this class name and create the theme in line and using that variable to the page right but right now we can use this font trio to find really nice font.

So as you can see in here we have multiple pairs if you go to for example on the clean bold or creative and maybe I like this ABeeZee all right as you can see it's basically have subsets let's try to just clone this I'm going to using this command in here using npm go to the terminal and then paste

npx shadcn@latest add @fonttrio/abeezee

So it asks you to install shadcn ui first because it is built on top of shadcn UI so I'm going to use default options for installing let's just take a look what we get now on the landing page all of the fonts has changed for the headings and the body it's cool everything is just apply automatically so let's take a look you can see the default Google Sans and in the variable also Google Sans right now it doesn't exist so this is not useful so let's just remove that if you want.

So these three font is already apply on the layout basically, how if I comment the layer base, and see what will happen?.

If you do this, it's basically using the system UI by default. Everything is works really nice. So for example, I want to change the font, right? So let's get another font font from FontTrio. Let's try to use one. So I'm going to copy another and go back to terminal paste it and install it. This is will override the styling. And yeah, just let's just take a look what the result it just apply the new font right. You have the new font for heading and then the body and also for the code as well. Old font from FontTrio already there you can remove that. Let's remove. And also don't forget to go back to your global CSS and make sure uh on the theme inline you have these heading, right? Heading come from this new font and the body as well, right?. I think everything is should be fine. So overall this is really great tool you get three font that are nicely paired and ready to use in your project. Just make sure to always review your code and verify that everything is applied correctly.

Tools & Packages Used:

FontTrio: https://www.fonttrio.xyz

Fonts library built on top of shadcn ui