Web fonts using CSS Font Face

hey what's going on guys today I wanted to show you how to use custom web fonts on your website using the font scroll calm web font generator here I have a test website set up on my local server if we look at the folder for this website just has an index. html file and a CSS folder here inside the CSS folder we have a style about CSS file if we look at this file it just has a body element with a font family set to for Donna so the top one over to fonts broadcom and as you can see they have a lot of different fonts to choose from let's just choose the top one here the source and spring and when you find a font that you like be sure that you check the license to make sure that you're allowed to use this font on your website here we see that this font has the open font license so it's okay for us to use let's go ahead and download this ODF file and once that OTF file downloads let's go ahead and extract it okay so when we downloaded the source sans Pro it gave us all these different fonts it gave us the bold the italic the ligh for this tool tutorial we're just going to use the source sans program Euler ATF file so let's hop one back over to font squirrel and let's go to the web font generator now what this web font generator does is it takes that one OTF file and it generates everything that we're going to need in order to use that font on our website so let's go ahead and go to add fonts and we're gonna choose source sans Pro regular OTF and before we can download our kit we have to agree that we've read over the licensing and that we know that we're allowed to use this font on our website so go ahead and agree to that and once you do that then you have the option to download your kit now once your font kit is downloaded go to your downloads folder and let's extract that zip file okay now we can see all the files that font generator created you can see we have an e OT file here svgt TF what these are their different font files that are going to be used in different browsers for compatibility what we're going to want to do is copy all the files that font Jenner created and we are going to paste these into our own website specifically in the CSS directory where our own CSS file lives okay now if you look at the style sheets CSS that the font generator created if we open that up we can see that it created the font face rule that we want to use in our own CSS file and this font face rule already has everything we need it has all the URLs to those font files so let's go ahead and copy this code and then let's open up our own CSS file and let's paste that at the top okay now if you look at this top line here this font family line this is the name that we're assigning to this font so if I copy this I can use this font now anywhere in my CSS file to assign that font to any of these elements so if I use that here at the body element now the body will use the source sans profile that we downloaded so let's go ahead and save that CSS file go back to our browser and see if everything worked so now let's go ahead and reload that okay so the new font worked the custom font work that we thought we wanted so that's one way to do custom fonts for your website there's a lot of different places to find these fonts font squirrel's one of them you

can also go over here to google fonts and you can download the fonts from there and then run them through the web font generator as well and go through the exact same process hopefully this tutorial was useful to you guys and I appreciate you guys watching Thanks