WEBVTT 00:00:00.211 --> 00:00:05.221 You've seen how to change the color and background color of text on the page. 00:00:05.303 --> 00:00:08.682 But there's so much more that you can do with text and CSS. 00:00:09.509 --> 00:00:11.632 To start off, let's change the font. 00:00:12.577 --> 00:00:15.925 What's a font? You probably already know what one is, but you may 00:00:15.925 --> 00:00:17.034 not know the word for it. 00:00:17.243 --> 00:00:19.507 It's the style of the letters that make up the words. 00:00:19.802 --> 00:00:22.996 It is whether the letters have flourishes on them, or how thick they are, 00:00:23.176 --> 00:00:25.083 or if they look like they're written with an ink pen. 00:00:25.884 --> 00:00:30.266 It'll be easier if I go ahead and change the font on this webpage. 00:00:30.663 --> 00:00:35.441 I'll go to the CSS rule that selects all the paragraphs, 00:00:35.729 --> 00:00:37.957 and add a `font-family` property here. 00:00:41.739 --> 00:00:43.829 Do you see how the letters changed [once we did that]? 00:00:44.115 --> 00:00:45.805 They look a little bit simpler now. 00:00:47.293 --> 00:00:52.183 Now, let me change the `font-family` back by specifying `serif` instead. 00:00:52.283 --> 00:00:55.902 Do you notice that the letters look a little more complex? 00:00:55.902 --> 00:00:59.859 A 'serif' font is any font that has what looks like little 'feet' on the letters. 00:00:59.979 --> 00:01:04.269 When we tell the browser to use a 'serif' `font-family`, it will use the default 00:01:04.269 --> 00:01:07.712 serif font for the computer. Which is usually the 'Times New Roman' font. 00:01:10.554 --> 00:01:13.114 I'm going to change it back again, to `sans-serif` [now]. 00:01:14.246 --> 00:01:17.806 The 'sans' comes from Latin and means 'without.' 00:01:17.996 --> 00:01:21.810 So a sans-serif font is one that doesn't have the little 'feet' on the letters. 00:01:22.101 --> 00:01:23.722 That is why the letters look simpler. 00:01:24.177 --> 00:01:27.936 When we tell the browser to use a sans-serif `font-family', it uses 00:01:27.936 --> 00:01:33.136 the default sans-serif for that computer, which is usually 'Arial' or 'Helvetica'. 00:01:33.136 --> 00:01:37.710 But, here is an important point: It'll pick the default font of whatever 00:01:37.710 --> 00:01:41.216 computer the viewer is on, not the author. 00:01:41.553 --> 00:01:45.257 So we may very well be seeing two different sans-serif fonts right now, 00:01:45.317 --> 00:01:47.595 if your computer has a different default than mine. 00:01:47.595 --> 00:01:54.330 Sometimes, that's okay, but other times I want the viewer of the webpage to see 00:01:54.330 --> 00:01:56.263 it in exactly the same fonts as me. 00:01:56.701 --> 00:02:01.981 In that case, I can specify the precise font name. For example, Helvetica. 00:02:03.150 --> 00:02:07.938 This will work, as long as both you and me have Helvetica on our computers. 00:02:08.436 --> 00:02:12.641 But not all computers have all the same fonts, and in that case the computer will 00:02:12.708 --> 00:02:14.039 ignore the property entirely. 00:02:14.746 --> 00:02:20.029 Luckily, CSS lets us specify a 'fallback' font-family, for backup, in case 00:02:20.058 --> 00:02:22.303 a particular font doesn't exist on a computer. 00:02:22.979 --> 00:02:28.001 You just add a comma after 'Helvetica', and then bring back `sans-serif` there. 00:02:28.443 --> 00:02:32.737 Now, the computer will look for Helvetica, and if it can't find it, just use its 00:02:32.737 --> 00:02:34.438 default `sans-serif` font. 00:02:35.070 --> 00:02:39.300 Generally, whenever you specify a specific font name, like Helvetica, you should 00:02:39.324 --> 00:02:42.745 always specify a backup family name as well. 00:02:44.447 --> 00:02:48.349 Besides 'serif' and 'sans-serif' there are a couple other generic font-family 00:02:48.349 --> 00:02:49.497 names we can use. 00:02:50.100 --> 00:02:56.604 If we wanted our lyrics to look handwritten, we could specify `font-family: cursive`. 00:02:58.274 --> 00:03:03.874 If we wanted the lyrics to be fancier, we could try the `fantasy` font family. 00:03:04.944 --> 00:03:08.305 Or, what if we wanted them to look like they were written on a type writer? 00:03:08.305 --> 00:03:11.124 We could specify the `monospace` font family. 00:03:11.204 --> 00:03:15.184 The `monospace` font is fixed width, meaning that all of the letters take up 00:03:15.196 --> 00:03:16.306 the exact same width. 00:03:16.477 --> 00:03:20.051 And, in fact, you've seen a lot of monospace fonts here on Khanacademy, 00:03:20.258 --> 00:03:23.328 because we always use monospace fonts for code editors. 00:03:23.996 --> 00:03:27.077 That's because we want all of our code to line up, regardless of the letters in 00:03:27.216 --> 00:03:27.781 the words. 00:03:29.480 --> 00:03:33.310 Now that you know how to change the font family, use your power wisely. 00:03:33.450 --> 00:03:37.790 If you want your page to look good, limit yourself to a few different families, 00:03:37.790 --> 00:03:40.230 and come up with pairs of fonts that look good together.