Font Properties4:57 with Guil Hernandez
Like text properties, font properties let us change the appearance of text by assigning a font family, font size, font style, and more.
CSS font stacks are prioritized lists of fonts that the browser will cycle through until it finds a font that is installed on the user’s system.
Defines a typeface for our text.
Allows italic or oblique faces to be selected within a font family.
Like text properties, font properties let us change the appearance of text, 0:00 by assigning a font family, a font size, a font style, and more. 0:04 So first, we can use the font family property to define a typeface or 0:09 font for our text. 0:13 And there are two types of font family names. 0:15 There's the name of a specific font family, like Verdana, Arial, or Helvetica. 0:17 And there's a generic family name, like serif, sans serif, or monospace. 0:23 So we're probably a little tired of looking at the browser's 0:28 default serif font. 0:31 So let's give our body a font family properties, so up top 0:33 the body rule right beneath the font size declaration we're gonna type font-family. 0:38 And then we're going to set the value to san-serif. 0:45 So now we save our stylesheet, and refresh our page, 0:51 we can see how all the text on the page changed to the san-serif font. 0:55 Now unlike serif fonts, 1:00 san-serif fonts have no finishing strokes or ornamentation. 1:01 If you wanna know all the generic font family names CSS has to offer, 1:06 you find them in the MDN docs reference I've posted in the teacher's notes. 1:10 So back in our project, we'll want to use a more specific font family, 1:17 than simply sans-serif so, let's go ahead and choose one. 1:21 When choosing a font or tight face, it's important to understand that in order for 1:25 the fonts we choose to be displayed by a browser. 1:30 Users viewing our sites, will need to have those fonts installed on their computer. 1:33 But not all fonts are available on all computers. 1:38 Now the ones that are available on all systems are called, web-safe fonts. 1:41 So in most cases, we'll need to define other web-safe fonts as fall back, 1:46 by creating what's called a font stack. 1:51 CSS font stacks are a prioritized list of fonts, that the browser will 1:54 cycle through until, it finds a font that is installed on a user system. 1:58 And we write the font stack as a comma separated list of fonts, so 2:02 if a user does not have the first choice installed, 2:06 the browser will try the alternative font from that list. 2:09 So, let's go back to our font family value. 2:13 And let's start writing our font stack. 2:16 So, let's set the first font in the stack to Helvetica. 2:18 Then, we're gonna add a comma and 2:26 let's make the second font in the stack Arial, and 2:28 then we'll follow that with a comma and leave the generic sans-serif font name. 2:31 So here, if the user has Helvetica installed on their computer, 2:37 the browser will display it. 2:42 If not, it will then display Arial. 2:44 And if Helvetica and Arial are not available, 2:47 the browser will then use the generic font family of san-serif as a last resort. 2:50 So it's always good practice to include that generic font family name, 2:56 as a last alternative in the font stack. 3:00 Now, keep in mind that if a font family name is made up of more than one word, 3:03 we'll need to write inside quotes. 3:07 So, for example, if we make the main font family Helveticaneue. 3:10 Because the font name Helveticaneue, is made up of more than one word, 3:19 it's gonna have to be inside quotation marks. 3:24 You'll find a pretty neat CSS font stack generator for 3:29 web-safe fonts at cssfontstack.com. 3:32 I'll also post a link, in the teacher's notes, to this. 3:36 And in an upcoming lesson, 3:39 we'll learn how we can provide our own fonts by importing web fonts. 3:40 That will eliminate the need to depend on that limited number of fonts, 3:44 users have installed on their computers. 3:48 Once we have our font family set, 3:51 we can use a few other font properties to style our text. 3:53 For instance, one of them is that font weight property we used in 3:56 the previous video, and there's also the font style property we can use to give our 4:00 text an italic or oblique style. 4:05 So, if we go back to our body rule, and add a font style property, so 4:08 we're gonna type font-style. 4:13 If we set the value to italic, then save and 4:17 refresh the page, we can see that all the text on the page is now italicized. 4:22 We can also set the value to oblique. 4:28 Now oblique isn't used often, 4:32 mostly because a lot of typefaces do not have an oblique version. 4:35 Now the default value, for the font-weight style is normal which simply displays 4:39 a normal font style, the one we've seen all along, and that's what we want for 4:47 our body text, so let's go ahead and remove the font style declaration for now. 4:52
You need to sign up for Treehouse in order to download course files.Sign up