How to setup google fonts in next 13 with tailwind css

all right so this is going to be a really short video just an overview of how to set up custom fonts and colors and kind of get a better understanding of how like the Tailwind config works I'm using the T3 stack which comes kind of set up with Tailwind if you wanted to and this is all used to build out this little newsletter application that I'm working on so I have a custom font here and I also have some custom colors to find so that anywhere in the page or anywhere in my application I can just go ahead and say like I want to use this blue or I want to use this this dark color here so let's first of all look at the colors how did I actually achieve that it's actually pretty easy until when um you go to your tail and config and inside your theme you can basically just put an extend block and then say I want to extend the colors that I have available to me and you can kind of namespace it with whatever you want so I put WDC here but you could put you know app or whatever I already miss it just say whatever and then once you name space it you have access to that color to that namespace and the colors that you define right so I can say whatever.dark whatever.light whatever.primary and let me just show you that real quick if I add like another one called like secondary let's just make it Pink let's see what happens here so if I add that in I should be able to go to any page of my application now and I do have the tail and intellisense set up so it should tell me if I'm using an incorrect color let's just make all the text Here Pink so if I go here and just say text hyphen and then say w d c actually it's called whatever it should say whatever notice that all my colors pop up in my little intellisense I'm gonna go ahead and click secondary save the page and now notice that we get back that pink color now the background color changed because obviously I changed the namespace let's set that back and let's go back here and make that WDC and that's how you can basically set up a custom color palette for your application it's really nice um obviously you can do the same thing with like CSS variables so for the custom fonts how did I do that well I basically read the docs and they kind of walked me through I think next also has docs about this um so this is more specific to next and not necessarily next um not necessarily Tailwind but what you have to do is you import from next slash font slash Google you can import whatever font that you want so you could do instead of Sophia Sans you could potentially say uh I don't even know any of these off the top man like Cairo or something um let me just go back to Sofia Sans though and you make a variable here and you can basically name it whatever you want and you need to pass in hyphen hyphen whatever the font name you want to use so it's kind of confusing to understand like how this works but basically you set up this you set up this next font variable and then down in your main you can just put it here so I can say Sophia dot variable and that'll kind of give you access to use the font throughout your application now there was another configuration you have to set up and that is basically here you have to bring in a font family and inside this Tailwind config you have to extend your font families and I said Sans and if I instead if I said like WDC I'll show you how this works so basically you set whatever name space you want for your font family and you tell it to use that font Sophia that you defined over here in the app by the way the app is something you have to create if you don't already have it so you kind of create it and then you just make like a really uh blank blank component that wraps your main component but you'll see here it's going to basically use this font and then it falls back on I believe Sans if that one doesn't seem to work but let's just save the page and see what happens because I do believe this was working before but now I changed it let's hover over the font and let's go to the computer real quick and let's see what font family we're using I'll say font family and notice that the Sofia thing is nowhere here okay so we're not using the Sofia fine take a good look here this one is going to look a little bit different now the reason this is broken now because remember in the talent config we defined WDC as our namespace so I have to go back here instead of saying font Sans I'll say font WDC and now if I go back to my app we got the font going okay so it's a little bit um you know got to configure some stuff but once you've got a configure it works pretty good and the fonts will automatically download from Google which is pretty nice um so that's how you can set up custom colors or custom fonts in your application if you're using next and tailwind and hopefully this was a quick little overview for anyone who might be using a T3 stack or just using tailwind and next as well right and just to kind of show you one more time like let's just try changing the font to something else like let's go here and let's try importing something else like let's just try changing the Cairo and see what happens some fonts don't work for whatever reason like you'd have to change um some weights and whatnot but now if you go we have a chiro font okay so that's how you can quickly change out fonts and whatever just by basically importing a different font name and using it there so technically if I want to make this more abstract I could say like main font like that um maybe I could do this font main font and then I can go over here and just make it more generic so that there's only one place I have to switch out my fonts yeah so anyway if you guys enjoyed watching this little walkthrough be sure to give me a thumbs up subscribe comment whatever and also feel free to join me Discord you can talk to me directly or just find a place to hang out with some other developers and just ask questions uh if you have any more things you want me to Maybe cover in my videos leave a comment below and like always have a good day and happy coding

Channel: Web Dev Cody

Views: 15,080

Keywords: web development, programming, coding, code, learn to code, tutorial, software engineering

Id: VVRskhA2rug

Length: 5min 38sec (338 seconds)

Published: Thu Jan 26 2023