Add a Google Font to Tailwind CSS | 2023

all right we're gonna quickly go through adding a Google font to an existing Tailwind CFS project so yes I have an existing project right here and if I run it yarn start it's going to open in that browser right there and it has Tailwind configured already guys do you if not go back to an earlier video If I have one about setting it up I think I only have one for Drupal so uh let me know if you need help with that anyway this is the site I already have a couple Google um fonts in here I recorded it earlier made a video posted it and some guy gave me the helpful although kind of passive aggressive sounding tip that uh the quality set the resolution was wrong thank you anyway so let's do it I have enter and go lows already in there I'm looking at Roboto which I don't want to use um let's pick a font that's cursive or something so we can easily see it uh I don't know or something like this tilt prism all right we'll try this okay okay okay how do we do that scroll down I always forget okay there's only one style the regular 400 that's good for us so I clicked it select regular 400 if it doesn't open anywhere for you it's up here in view selected families excuse me okay so I clicked deselected families and I already have Roboto selected in here and we don't want that so let's get rid of it remove all yep tilt prism is there selected regular 400 use on the web to embed a font copy the code into the head of your HTML we're not using that method we're using Import in um sorry this here is the Tailwind I config.tss but we want the index.css which I have in the source directory SRC okay looking at this I hope you can see that still um we have two Imports at the top which correspond I'll split this Tailwind config down and if we minimize the colors key if you're not familiar with detail when config it is simply an export of an array an object with some arrays and objects inside the first one tells Tailwind where to find Tailwind styles the content key the theme key has to do with everything theme as you can see I have some colors defined I'm just going to minimize the colors key and so we can see the extend is which is where the font family key is and we have enter and golos we are going to add and you can add it anywhere Within within the font family it's gonna have to doesn't have to be at the end doesn't have to be at the beginning maybe in the middle um here we will say we're going to copy not copy we're going to um reference over here skipping a step sorry back up here we're going to go ahead and import the font I just copied to embed a font copy the code into the head of your HTML we're not copying it there we're copying in our index.css and if you if you look closely that is family equals tilt plus prism and it doesn't have any weights because it only has one I guess and that's all we need that is all we need we have to reference it here now okay we can call it whatever we want here like this would work other other than that um semicolon and for fun I guess I'll leave it and we'll change it in a minute all right we still need to tell it what the actual font name is which is um this these lines like these are equivalent to what you would see in in the CSS itself as you can see right here they are it says CSS rules to specify families um well we're not specifying it as a CSS rule we're specifying it as a Tailwind config so let's copy the whole line excluding that semicolon over there we're going to paste it in it's going to be wrong because as you can see cursive needs quotes around it until the prism was already quoted so that's good and something is still wrong we do not have an opening um where bracket there we go so our new font tilt prism key to this random string is the actual name of the font um as far as Tailwind is concerned it will replace that with the Tilt prism so let's try it I I will save this index.css the Tailwind config is saved we need the home page I don't remember where it is the pro key okay I guess maybe we need no not the new domains we do need the home we're going to open home and make it a little bigger new domains I'm just going to change this new domains um H2 to our new font and hopefully it works so right now it's set to font enter we will call it font Dash and paste in that creates a string and there you go it changed and we have successfully excuse me very much but in a way I'm going to re-record that whole thing um we have it key to that crazy string let's fix that we're going to make it a actual name we'll call it tilt keep it short it's not gonna work and then we're gonna go to config and change it to tilt here save and then it's going to work and that's that pretty simple right um hit me up if you need any help want any other videos any kind of questions comments um again thank you to the dude who pointed out the last video was unusable I definitely want these videos to be viewable and usable otherwise what's the point so keep it up thank you

Channel: Full Stack Web Developer Stuff

Views: 12,409

Keywords: coding, great learning, tutorial

Id: B4v7ZDLxiS4

Length: 7min 18sec (438 seconds)

Published: Fri Mar 10 2023