How to Use Custom Fonts with Tailwind CSS

hey what's up everybody in this video i'll show you how to use custom fonts intel in css so we look at using a third-party service like google phones or have a self-hosted version of the fonts using the add font phase css at rule let's get right into it alright so here's the piece of ui we're going to be working with in this video we're going to implement two custom fonts one serif font for the heading tags and then we're also going to use a monospace font that we're going to use for our three little codes tags here here and here first i'll show you how to embed google fonts as it's a fairly popular approach [Music] alright so let's head over to google fonts which has a very large collection of really interesting fonts and here since i know what i want to use i'm going to use the search and here for the serif font we're going to use a font called laura so let me click on this and here since we want to use this for the heading tags i'm going to come and select the bold 700 style and now for the monospace font i'll use a font called dm mono which looks really nice so here i'm going to use the regular and regular italic versions of it so now i can come up here and i should have three fonts selected perfect and you can see the instructions here to embed a font we can copy the code into the head of our html document so there's a link tag strategy and there's also an at import statement that you can use here we're going to use this double link tags so let me copy this and in our code i'll come here at the end of the head tag and i will paste these two tags nothing has changed just yet here because we haven't actually used this font anyway back in google fonts if i scroll down you can see that to use this font i can declare the font family to be dm mono or laura so let's come in our css file and while this is not what we're going to do one thing you could do is use the add layer base and say i want the font to be applied to everything so on the body tag i would apply font family and inside of quotes laura and then serif so this is going to blanket apply the laura font to absolutely everything within our body tag and that's not what we want of course we could be more specific and say we want the h1 and h2 tags to have the laura font only and now it works like we want but we're still missing on a lot of the flexibility and power that comes with tailwind css utility classes so instead of writing custom css here we're going to create a new custom font family utility class to use this lora font so let me delete all of this and i'll come in our tailwind config file and here we're going to extend the font family object inside here we're going to create a new key and we could call that brand or custom but here i'll just go with laura and here we're going to have our laura in single quotes and serif so that's going to generate a font-lora utility class for us cool so let's try that and let's say we wanted to recreate this blanket apply on the body tag i could come here and go class font-lora and you can see that this class has created a fun family of laura and serif and if i look at our project everything once again has the loraphone just like before but now we have much more control and power because of this utility class here we can use this on any element in our markup and we can also use all the variants like a breakpoint variant or hover variance that tailwind comes with alright so we're going to remove this from the body tag and instead we're going to apply it to the h1 here font lora and let's come down and find the other heading the h2 here font lora and now only our two headings are using these fonts but like i mentioned before we have much more power and we can use any variant say for example that in our h1 tag at the top we only want to use the fonts lora at the large break point and up you can see that now it's using lora because we above the large breakpoints but if i open the dev tools and make the viewport smaller you can see that before that breakpoint we're using the default system font and that works with every variant in tailwind so not sure why you would do this but you could do on hover use the font laura and now the laura font only shows when we hover over the heading all right let me undo this and now we're going to use the other custom fonts the dm mono monospace fonts for the code tags here here and here back in our config file in the font family object i could create another font family dm and this one would be dm mono mono space let's go and find our first code block here which is right here and we'll add a new utility class font dm which as you can see sets the family to dm mono and it's being applied here since we also installed the italic version of the font let me quickly add the italic class so it's a little bit more obvious that this is the custom font and you can see it looks really good okay but now let's say that we want in our project to always use this dm mono custom font any place where we would have the font mono stack that comes with talent css by default we want to use this custom font here so if i replace this font dm with the font mono you can see that by default tailwind provide this font family stack of ui monospace sf menlo monaco and a few others and so that would be really nice to keep all these fonts here and then prepend our dm mono at the top of the list so let's delete this dm and instead target the mono and see what happens if i just have the dm mono font so right now we have completely wiped out the monospace font stack we definitely don't want to do this and turns out that you can define font families in the config file as an array so here what we want to do is have an array where the first item is our dm mono and then we want all the other fonts to follow here so we want to use the spread operator here and then find a way to use the other monospace fonts here at the top i will go const default theme equals and we're going to require tailwind css slash default theme and now instead of my placeholder other model space fonts here we can go into this default theme and then in there we're going to reach for the font family.mono and if we inspect our font mono utility one more time you can see that this time we have the dm mono google font followed by all the other fonts which is exactly what we want okay so now our font works here and you might notice that it actually works here and there already as well and the reason for that is tailwind in the base layer defines the code tag to use the monospace font stack so now we've updated this phone stack and the first font that it receives is dm mono so that means that i actually don't even need to use the font mono here in the first code tag because it's going to use that by default alright so now a tailwind project here is working with two custom embedded google phones now let's take a look at how we can self-host these fonts instead of relying on a third party service like google phones and for this we're going to use the at font face css at rule i'm going to remove the two link tags which means that we're going to lose our custom fonts and now we have the fallback versions coming in okay so when you want to host the fonts yourself the process is essentially to have the fonts somewhere on your directory and then write some css that describes how to find this font how it's called how it should look and where to find it on the directory tree and i've prepared the fonts folder that has the wolf and wolf 2 variants of our lora 700 and then dm mono italic and dm mono regular and there's a few different formats for fonts and these two wolf and wolf 2 are mostly supported in major browsers and in many cases are sufficient so we're going to put that folder in our project directory here and since i'm using vit for this project oh and actually it's vit the convention in vit is to use a public directory in the root of your project for static assets so that's what we're gonna do so i'll quickly create a new folder called public and then i'll drag my fonts directory in there okay so in our css file let's open the base layer and here we're going to use at font face css at rule so one of the properties that this font face rule needs is the font family and it's essentially how you want to name the font and refer to it so if i have my font here then in the css let's say we had an h3 somewhere you would go font family and then something like my font sans serif for example and if the name here matches that font that's the font that's going to be used okay so let me delete this so here we're going to use laura is the name and let's keep going so another property that we can give is the font weight and here it's going to be 700 because our laura font is 700 in weight you can also specify a font style which could be italic or normal etc but normal is the default so here we can remove that let's add one more and very important property the source essentially it's telling where to find the font in our directory tree so here we can have a url and in our case we're gonna go with an absolute path from our public directory so slash fonts slash and it's called laura 700. and we're going to go with wolf 2. and we also need to specify the format of the font in this case it's worth 2. now we can specify more than one font file here in the source remember we want to support wolf2 and wolf and so we can have a comma separated list so i'll grab the first url here and paste it a second time but this time wolf 2 is going to be just woof okay so with that we've defined a new font called lora which is 700 in font weight and is located here so if we look at our design now so if we look at our design you can see that it's working we're using the laura font in both our heading tags beautiful let's do the same for our dm mono font so we have the regular and the italic versions so i'll come here and i will duplicate this whole block this one is going to be called dm mono the font weight is going to be 400 we don't need a font style for the regular version and for the source we're going to replace laura 700 with dm mono and let's duplicate this one more time and this one is going to be also dm mono font weight 400 but the font style will be italic and the source will be dm dash mono italic and yeah it's working beautifully we have here the italic version and here the normal version and so now we're hosting these fonts ourselves which is a really good solution if you want to save an external network request or if your font is not available on the third-party service it gives you a lot of control in-house how you name the phones how you load them etc and it's a really useful technique that is fairly easy to apply once you understand it and that about wraps it up for this video thank you so much for watching and i'm looking forward to see you again bye for now [Music]

Channel: Tailwind Labs

Views: 68,905

Keywords:

Id: sOnBG2wUm1s

Length: 11min 36sec (696 seconds)

Published: Mon Jun 28 2021