How To Add Custom Fonts | Tailwind CSS Tutorial | Tailwind Tutorial | Learn Tailwind 2 CSS

what's up developers is dory here and i hope you're having a great day since we're going to add custom fonts to tailwind before we continue on i want to quickly let you know that you can support the channel through patreon where you can get access to my private discord group where everyone is helping each other out with their coding issues if you are interested to join the link will be in the description down below at the beginning of this course we've talked about font families and i've showed you that there are three default font families that you can use we got the font sense serif and mono if we don't add a font family to our index.html page it will automatically use the fontsense class you might come in a situation where you just don't want that and you want a completely different font that is not available in the list that tailwind provides for us you don't want to go into a meeting with a client saying that they can only choose either of these three fonts most of the people get their custom font on google fonts so let's open a new tab and let's go to fonts.google.com let me make it bigger what you need to do right now is to search for a font that you like i will just choose a random one that is different than the available default tailwind classes so let me actually search for a font called shadows into light let's click on it what we need to do is to select this font and a sidebar pops up where we can insert our head tag right here that you're probably familiar with but that still doesn't do the trick for us since we can't add it into our classes what we need to do and something that we have done in the first video of this course is using the add import so let's do that and let's copy the import without the style tags let's make the screen smaller now let's go back to visual studio code we need to place this right inside the style.css file where we imported our base components and utility classes it's the style of the css file in our root click on it and let's go right in front of the first one and let's paste it right here this will import the shadow into light font into our style.css file it still doesn't give us the opportunity to use it since we need to create a new class name that will refer to this import right here if we zoom in you can see that there is a css rule right here with the font family that you probably know from css but what we need is the first value so shadows into light copy it open the tailwind convict file because we need to define a new class right here inside the extent let's hit enter and what we're going to do right here is to call a predefined tailwith class called font family column curly braces and let's hit enter we need to define a font family name that we can use inside our index.html file keep it similar to the font name that we copied from google fonts so in single quotes let's call it shadows let's add a colon and what we're going to set it equal to is what we just copied the utility name that we have to find right here will be a little bit different since tailwind will automatically add a font dash in front of shadows so if we define shadows right there tailwind will convert it to font dash shadows now it won't work if we just save it and close off the file let's actually do that for our stylesheet right here let's close it off what we need to do is to rebuild our css where our new class will be added to we did create a npm command so let's open the terminal again let's perform npm run build dash css let's hit enter and this will rebuild our style.css file as you can see right here it has been placed into css forward slash style.css so let's open it let's actually close off our terminal because we don't need it let's open the style.css file inside our css folder as you can see at the top our import has been added here as well so let's press command f or ctrl f and let's search for shadows you can see that font dash shadows has been defined with a font family of shadows into light attached to it if we go to our local host refresh the page it still hasn't been applied what we need to do is to go to our index.html file and right inside of our body add a class of font dash and as you can see in the drop down shadows has been added save it and as you can see our font has been changed drastically this is not sounds mono or serif but let's make the screen a bit bigger let's inspect the page let's open our body tag let me zoom in right here our font family has been changed to shadows into light this was it for this video where i've showed you how you could add custom fonts in tailwind if you do like my content and you want to see more leave this video a thumbs up and if you're new to this channel please hit the subscribe button you

Channel: Code With Dary

Views: 10,436

Keywords: tailwind css, tailwind css tutorial, tailwind css crash course, how to use tailwind, tailwind ui, css tutorial, tailwind crash course, tailwinds css, tailwindcss tutorial, tailwind tutorial, tailwind tutorial 2021, tailwind tutorial css, how to use tailwind css, how to use tailwind css in html, tailwind 2, tailwind css 2.0 install, tailwind ui tutorial, tailwind 2.0, custom fonts tailwind, add fonts tailwind, fonts tailwind

Id: 5c7_Og_JwWo

Length: 5min 25sec (325 seconds)

Published: Wed Jun 23 2021