Learn CSS fonts in 7 minutes! 🔤

hey how's it going everybody in today's video I'm going to show you everything you need to know to get started working with fonts and Google fonts and CSS so sit back relax and enjoy the show all right let's get started everybody we will need an H1 element why don't you go ahead and type in your name if your full name's pretty long just use your first name I guess and we'll need a paragraph to generate some text and vs code you can type lorem then hit tab that is good enough for now to change the font style we will go to our CSS style sheet I'll select our H1 element to change the font we can set the font family property then pick a font I would recommend a Sans serif font serifs are these little projections on each character after each brush stroke Sans serif fonts don't have these projections Sans serif fonts are easier to read on a monitor or mobile device I'm going to pick the Sans serif font of verdana now not all fonts are universally accepted by all web browsers for some reason if we can't display verdana it's good practice to have a fallback font one that's web safe so to add a fallback after your primary font separate each font with a comma let's pick Ariel if a web browser can't display verdana the next available font is Ariel that's why you may see two or three fonts listed for a font family they're all fallbacks let's change our paragraph element I will set the font family to be lucida console if the font name contains any spaces you can just place the font name within a set of quotes for a fallback I'll use Courier new if we can't display the first font we will use the backup font now to change the font size there is a font size property normally it's 16. but you can adjust that number here's 18 here's 14. here's one it's really tiny you can barely even read it like at all another unit of measurement is em think of em as the standard one em means one hundred percent it's the normal size 1.1 em is 110 1.5 is 150 percent 0.5 is 50 percent you may see either pixels or em as a unit of measurement for the font size let's stick with one em you can change the font weight normally this is normal you can change that to bold if you so choose there's also font style again it's normally well normal you can change that to italic that's enough for basic fonts now I would like to introduce Google fonts head to this website fonts.google.com this website is free to use find two fonts that you like you can also narrow down your search too for example I do not want any serif fonts because they're difficult to read on a monitor I'll just use these two for convenience I'm going to open these in a new tab alright we have Roboto and open Sans I'm going to select one of these fonts I'll go with 400 regular I'll press the plus sign next to this font and we'll do so with our second font I'll go with light 300. to use these fonts we need to link our HTML file with the style sheet we can access that style sheet by going to view selected families be sure that this radio button is selected for link then we will copy this link within our HTML file within the head element I will paste that link we now have access to those two fonts my first font was Roboto my second font I already forgot the name of it open Sans and there we go that's how to link to the Google fonts API now if you do prefer these fonts can be loaded from either a remote server or locally installed on a user's computer for convenience I'm going to create a new folder within my website folder named fonts then heading back to Google fonts view selected families I will download all once we have our file it's a zip folder I'm going to unzip it we are looking for these ttf files they look something like this all we need to do is drag and drop these ttf files into our fonts folder I forgot which one I used I think it was a Roboto light these fonts are available locally we no longer need to link to the Google fonts API we can delete that link so now what we need to do is go to our style sheet and create a font face rule we'll begin with the first font at the top of our style sheet type at font Dash face curly braces we will set the source attribute to be a URL then add a set of parentheses the URL is going to contain the relative file path to one of these fonts I would like Roboto so I'm going to copy the file name this is within the fonts folder I'll place that first then paste the name of that file then a semicolon at the end I'm also going to set the font family property then I can come up with the name for this font I can keep it the same or change it I'll keep it the same though this font shall be known as Roboto light for my H1 element I will change that to be Roboto light that has appeared to work even though we're not linked to the Google fonts API let's add another font face rule we will use our second font fonts slash whatever the heck is listed here I'm going to rename this this font shall be known as open Sans so we need to change the font for our paragraph to that new font there we are all right everybody so that's a few different ways in which you can work with fonts in CSS

Channel: Bro Code

Views: 7,730

Keywords: CSS fonts, CSS google fonts, CSS course, CSS tutorial

Id: MnyCbILmtOY

Length: 7min 20sec (440 seconds)

Published: Thu Sep 21 2023