1 00:00:05,220 --> 00:00:10,530 Welcome back, everyone, to this lecture, we're going to discuss just the basics of fonts, everything 2 00:00:10,530 --> 00:00:14,160 we've seen so far is in this kind of times, new Roman style font. 3 00:00:14,460 --> 00:00:20,520 But you can actually affect the font family, font size, font style, font weight, text alignments, 4 00:00:20,520 --> 00:00:22,860 et cetera, all within CSS. 5 00:00:23,220 --> 00:00:28,990 We're also going to show you how you can actually link fonts from outside your website using a clean 6 00:00:29,070 --> 00:00:30,810 link inside the HTML. 7 00:00:31,200 --> 00:00:34,140 Let's get started with the basics by heading over to our code editor. 8 00:00:34,920 --> 00:00:38,040 All right, here I am back inside our Visual Studio code editor. 9 00:00:38,490 --> 00:00:41,790 What I'm going to do is inside the body. 10 00:00:42,300 --> 00:00:46,710 I'm going to create a div with a class. 11 00:00:48,190 --> 00:00:51,880 And we're just going to call this maybe stuff. 12 00:00:53,130 --> 00:00:59,640 And inside this, Dave, I'm going to create some paragraphs here sources and say text and create another 13 00:00:59,640 --> 00:01:01,980 paragraph here called more text. 14 00:01:03,070 --> 00:01:10,300 OK, so I have this class, and let's also creates maybe a heading one outside of that div that says 15 00:01:10,600 --> 00:01:11,110 welcome. 16 00:01:11,560 --> 00:01:14,800 So I have welcome and then a class div here with text and more text. 17 00:01:15,160 --> 00:01:18,160 Let's imagine I actually want to change the fonts here. 18 00:01:18,610 --> 00:01:24,850 To do that, I have to address the font family so I can come back to master CSS. 19 00:01:25,210 --> 00:01:29,500 And then if I only wanted to change the font for welcome, I can say one. 20 00:01:30,570 --> 00:01:33,520 And then I call the property Font Dash. 21 00:01:33,900 --> 00:01:37,770 And you notice there's going to be a lot of different properties for fonts. 22 00:01:38,100 --> 00:01:40,500 But the one we're looking at is font family. 23 00:01:40,890 --> 00:01:44,250 And this is going to give us a list of fonts that are available to us. 24 00:01:44,400 --> 00:01:47,100 Later on, we're actually going to show you how to get fonts from the internet. 25 00:01:47,370 --> 00:01:48,870 We're going to say font family right now. 26 00:01:49,170 --> 00:01:53,040 And you can see there's a bunch of just built-in fonts that are available to us. 27 00:01:53,430 --> 00:01:57,320 Keep in mind, not every font is available on both Windows and Macs. 28 00:01:57,330 --> 00:02:02,220 There are some funds that are only available on Macs, but we should be OK with the list shown here. 29 00:02:03,000 --> 00:02:05,670 Now, let's go ahead and choose one of these, let's say, to humor. 30 00:02:07,540 --> 00:02:08,050 There we go. 31 00:02:08,560 --> 00:02:12,130 And now I can see the change has occurred, but only to each one. 32 00:02:12,490 --> 00:02:18,580 So to comment this out, you can do control forward slash that we can see the effect come on and off. 33 00:02:19,690 --> 00:02:22,840 OK, let's imagine I wanted everything on the page to have to humor. 34 00:02:23,050 --> 00:02:27,400 Well, probably the smartest way to do that is to just say body here. 35 00:02:27,760 --> 00:02:30,970 And then that would affect the font family for everything. 36 00:02:31,510 --> 00:02:35,920 Now let's imagine I want welcome to have a specific text alignment. 37 00:02:36,190 --> 00:02:41,410 Well, luckily for us, there's lots of text properties within CSS to grab those. 38 00:02:42,250 --> 00:02:47,410 Once you've selected the elements, classes or ideas, you want to apply them to, you simply say Text 39 00:02:47,830 --> 00:02:53,230 Dash, and then you can see there are a bunch of different text properties that we can style. 40 00:02:53,530 --> 00:02:59,170 The one you're probably going to end up using a lot is text align, which then allows us to center the 41 00:02:59,170 --> 00:03:03,790 text left, right, justify, etc. So let's go and choose center. 42 00:03:04,600 --> 00:03:06,700 And you can see here that has now center the text. 43 00:03:06,880 --> 00:03:13,030 And what's really nice about this is regardless of how big the actual browser window is, you notice 44 00:03:13,030 --> 00:03:17,770 welcome is always going to be centered, which is nice because that means it's going to work regardless. 45 00:03:17,770 --> 00:03:23,830 If someone's looking at this on their phone or on a desktop or on a laptop, etc. So it's nice for different 46 00:03:23,830 --> 00:03:26,530 screen sizes that it's always going to stay centered there. 47 00:03:26,650 --> 00:03:30,160 And there's a bunch of text properties you can check out for that sort of thing. 48 00:03:30,580 --> 00:03:33,580 So we saw there's a bunch of font properties as well. 49 00:03:33,910 --> 00:03:38,140 One of them is font size if I want to edit font size. 50 00:03:38,440 --> 00:03:40,780 There's two main ways of doing it. 51 00:03:41,080 --> 00:03:45,520 One is through absolute units and the other is through relative units. 52 00:03:45,850 --> 00:03:50,920 Let me go ahead and bring up the Mozilla font size documentation. 53 00:03:51,490 --> 00:03:56,200 So if you come to the documentation for font size. 54 00:03:57,310 --> 00:04:01,660 Inside and then Webb Dock, so font size is the property worth taking a look at? 55 00:04:02,050 --> 00:04:07,960 And we can see here there's examples, so there's many different ways of actually changing the font 56 00:04:07,960 --> 00:04:08,320 size. 57 00:04:08,710 --> 00:04:16,540 There's basic just phrases like extra small, smaller, large, etc. that are sometimes useful to just 58 00:04:16,540 --> 00:04:19,450 say, OK, I want this to appear relatively small on the page. 59 00:04:19,750 --> 00:04:25,690 There's absolute units like pixel sizes or inches or things of that nature, like centimeters, millimeters. 60 00:04:26,080 --> 00:04:28,780 There's also percent signs that you can use as well. 61 00:04:29,650 --> 00:04:34,330 And as I mentioned, as you scroll down here, you can see the different syntax for setting up your 62 00:04:34,330 --> 00:04:35,650 KSAZ font sizes. 63 00:04:36,010 --> 00:04:42,460 But you're also going to see that there's a general description of font sizes being in terms of absolute 64 00:04:42,460 --> 00:04:44,140 units versus relative units. 65 00:04:44,500 --> 00:04:48,520 So the absolute units are things like in terms of pixels. 66 00:04:48,760 --> 00:04:50,650 So we scroll back up here actually passed over. 67 00:04:50,950 --> 00:04:55,150 So pixels or inches, those are going to be things that are absolute. 68 00:04:55,420 --> 00:04:59,320 These are really useful when you need actual accuracy and to make sure something is, let's say, two 69 00:04:59,320 --> 00:05:05,350 inches to the left or two inches from the top and bottom of the font, etc. because you intend for this 70 00:05:05,350 --> 00:05:06,400 page to be printed out. 71 00:05:06,820 --> 00:05:14,530 But you can also do is use EMS or EMS stands for an ephemeral, although that's really just a link to 72 00:05:14,560 --> 00:05:15,910 kind of an old printing press term. 73 00:05:16,240 --> 00:05:21,520 And essentially, this is going to allow you to do a ratio of the base font size on a page. 74 00:05:21,820 --> 00:05:22,950 So let's actually show you this. 75 00:05:22,960 --> 00:05:27,760 I'm going to try to set a font size of pixels, then how to set a font size with them and then how to 76 00:05:27,760 --> 00:05:30,170 use a combination of, let's say, something like eight percent an m. 77 00:05:30,670 --> 00:05:31,750 So let me close these off. 78 00:05:32,500 --> 00:05:38,110 And what we're going to do here is each one I'm actually going to, let's say, change the font size 79 00:05:38,110 --> 00:05:38,760 in pixels. 80 00:05:39,070 --> 00:05:41,490 So maybe I want it to be larger or smaller. 81 00:05:41,500 --> 00:05:45,040 I can say font that size colon. 82 00:05:46,670 --> 00:05:53,210 And then set it in pixels by saying a number like 40 and then saying pixels, if I wanted to be much 83 00:05:53,210 --> 00:05:55,950 larger, I could say something like 400. 84 00:05:55,950 --> 00:06:00,160 And you can see now it's absolutely ginormous fact that you can just see the W. 85 00:06:00,170 --> 00:06:01,850 It's so large, but you get the idea. 86 00:06:02,030 --> 00:06:05,600 Or for some reason, I want to make it much smaller, even though it's still heading one. 87 00:06:05,840 --> 00:06:11,510 You can see you can immediately kind of overwrite any default font sizes here, so I can just set it 88 00:06:11,510 --> 00:06:15,080 to forty there, then I can do things for kind of other pieces. 89 00:06:15,080 --> 00:06:19,940 So maybe if I want all paragraphs to be a particular size, I can say font. 90 00:06:21,060 --> 00:06:28,470 Size here, and maybe I make that larger or something smaller, et cetera, so I can see font size 20 91 00:06:28,470 --> 00:06:28,950 pixels. 92 00:06:29,280 --> 00:06:36,300 Now the other thing I can do with a font size with M or M really stands for ephemeral an order or an 93 00:06:36,300 --> 00:06:36,480 do. 94 00:06:36,510 --> 00:06:41,280 Here is I'm going to delete each one and paragraph two so we can focus here. 95 00:06:41,700 --> 00:06:44,190 And in fact, let's just show this with just. 96 00:06:45,610 --> 00:06:51,670 The paragraphs there, OK, so I have these paragraphs and you'll notice by default, there's some sort 97 00:06:51,670 --> 00:06:57,130 of default text size that the browser decides on, and the default text size for most browsers is actually 98 00:06:57,130 --> 00:07:05,200 16 pixels and the M that is a m that's going to actually stand for the current font size. 99 00:07:05,200 --> 00:07:12,550 So typically then that means one m is the current font size on the page. 100 00:07:13,060 --> 00:07:16,720 So that means I can kind of ratio things out based off this. 101 00:07:17,020 --> 00:07:24,430 And if I know the typical current font size is 16 pixels, then there's kind of a formula here in which 102 00:07:24,430 --> 00:07:32,290 I can say pixels divided by 16 is equal to one kind of relative unit of M. 103 00:07:32,620 --> 00:07:37,270 Again, this is going to be relative to the default browser text size. 104 00:07:37,690 --> 00:07:42,430 If you have some sort of really tiny screen, the default browser text size is probably not going to 105 00:07:42,430 --> 00:07:47,530 be 16 pixels, so we should expect this to be OK for a variety of screens. 106 00:07:47,800 --> 00:07:53,200 If I begin defining things based off kind of the default browser text size, let's actually see this 107 00:07:53,200 --> 00:07:56,830 occur in the paragraph. 108 00:07:57,490 --> 00:07:58,540 So I'm going to see paragraph. 109 00:08:00,450 --> 00:08:01,440 Font size. 110 00:08:02,390 --> 00:08:06,770 And then I'm going to set this equal to, let's say, something like three. 111 00:08:07,780 --> 00:08:14,910 EM and notice now it's much larger, so we can say now that it's going to be em. 112 00:08:15,270 --> 00:08:18,060 That is three times 16 pixels. 113 00:08:20,260 --> 00:08:27,940 Now you can also use a combination of percents and M in order to kind of set the body font size to, 114 00:08:27,940 --> 00:08:30,550 let's say, like one hundred percent of the default size. 115 00:08:30,940 --> 00:08:33,220 So I can say body say. 116 00:08:34,190 --> 00:08:35,210 Font size. 117 00:08:35,750 --> 00:08:36,280 Colon. 118 00:08:36,890 --> 00:08:44,059 100 percent here and then I can start rationing things based on the fact this is like font size 100 119 00:08:44,059 --> 00:08:44,390 percent. 120 00:08:44,570 --> 00:08:49,520 So this kind of linking this to OK, default is going to be the 100 percent of the default, which is 121 00:08:49,520 --> 00:08:50,930 16 pixels usually. 122 00:08:51,200 --> 00:08:55,250 So that means if I were to make the smaller like 10 percent, suddenly everything else would scale is 123 00:08:55,250 --> 00:09:00,080 now three times the default, but the default has been changed for the body to 10 percent of the default. 124 00:09:00,380 --> 00:09:05,810 So you can see how rate showing this with the percent sign allows me to quickly affect everything on 125 00:09:05,810 --> 00:09:06,320 the page. 126 00:09:06,830 --> 00:09:09,860 Now, don't worry too much about font sizes in general, right? 127 00:09:09,890 --> 00:09:15,410 Typically going to be dealing with this level of detail, and this is more of stylistic and design choices 128 00:09:15,410 --> 00:09:19,730 where you would just kind of go Google around things and say, Well, I want it to be this particular 129 00:09:19,730 --> 00:09:20,360 font size. 130 00:09:20,660 --> 00:09:26,210 The one thing to note here is you have the absolute length units and well as the relative length units, 131 00:09:26,210 --> 00:09:31,170 and so you can use percent sign to set things based off the default browser. 132 00:09:31,190 --> 00:09:36,590 Text size Now to finish off this lecture, I did mention that we show you how to download fonts from 133 00:09:36,590 --> 00:09:37,910 the internet or link to them. 134 00:09:38,420 --> 00:09:43,280 The easiest way to do this is by using a Google Fonts and their API. 135 00:09:43,820 --> 00:09:48,980 So if you Google search Google Fonts, there's actually a website called Fonts that Google.com. 136 00:09:49,310 --> 00:09:51,440 And these are all free fonts to use. 137 00:09:51,530 --> 00:09:55,580 You should check the license just in case there's, for some reason, something uploaded here that isn't 138 00:09:55,580 --> 00:09:58,010 free, but they're pretty much all free for the most part. 139 00:09:58,040 --> 00:09:59,420 Again, you can check the licenses. 140 00:09:59,750 --> 00:10:02,960 Let's go ahead and choose one that is really obvious that it's a different font. 141 00:10:02,960 --> 00:10:06,050 So no, scroll down here until I get one that's really unique. 142 00:10:06,230 --> 00:10:11,390 OK, so clearly, Molalla, that one is going to be really obvious if we're able to connect to it. 143 00:10:11,810 --> 00:10:13,640 So there's two options here. 144 00:10:13,670 --> 00:10:18,630 One is to actually download the family, which is going to download the files and that CSC. 145 00:10:18,920 --> 00:10:22,730 The easier way, however, is to actually use the Google API for this. 146 00:10:23,120 --> 00:10:29,240 So if you go to developers like Google.com forward slash fonts, there's documentation here on getting 147 00:10:29,240 --> 00:10:29,660 started. 148 00:10:30,110 --> 00:10:34,680 And what you do is you actually set up another link to a style sheet. 149 00:10:35,060 --> 00:10:41,060 You're essentially connecting this to an online CSS style sheet where you replace the family with the 150 00:10:41,060 --> 00:10:41,690 font name. 151 00:10:42,080 --> 00:10:46,490 So what we're going to do is we are going to copy this code sample. 152 00:10:47,420 --> 00:10:50,240 And then I'm going to come to my HTML. 153 00:10:51,330 --> 00:10:57,690 And we'll notice I can actually link to multiple style sheets and there is an order on how these are 154 00:10:57,690 --> 00:10:58,050 loaded. 155 00:10:58,230 --> 00:11:00,660 So I'm going to load that font first. 156 00:11:01,170 --> 00:11:04,800 So going to copy and paste this right here, this style sheet. 157 00:11:05,160 --> 00:11:10,320 So again, notice I'm adding in another link in the same way we have a link to our own CSV file. 158 00:11:10,680 --> 00:11:15,000 The one thing, though, is I have to figure out the family name for the font. 159 00:11:16,330 --> 00:11:22,570 And that family name is actually up here in the early formula law, so it's actually just move. 160 00:11:22,600 --> 00:11:23,740 Plus law plus law. 161 00:11:24,100 --> 00:11:31,690 So I'm going to copy that and then I'm going to replace font plus name as mu plus law plus law. 162 00:11:31,750 --> 00:11:35,260 Obviously, your names are going to change depending on what you decide. 163 00:11:35,800 --> 00:11:40,570 So I have now connected this to the Family Moola law. 164 00:11:40,870 --> 00:11:46,360 Now that means I should actually be able to reference Moola Law in the next CIUSSS file, since it's 165 00:11:46,360 --> 00:11:47,260 already been loaded. 166 00:11:47,410 --> 00:11:53,620 By the time I'm loading the master that CSV file, so it's loading up and linking to this CSV file, 167 00:11:53,620 --> 00:11:55,300 which essentially loads up that font family. 168 00:11:55,570 --> 00:12:00,460 And then I can now refer to it as a font family within master that CSS, you should note for the sake 169 00:12:00,460 --> 00:12:03,490 of the API, the spaces are filled in with pluses. 170 00:12:03,700 --> 00:12:08,380 We won't actually need to fill those in a pluses when we refer to the family insider access. 171 00:12:08,800 --> 00:12:10,840 It's going to come back to master that's, he says. 172 00:12:11,170 --> 00:12:16,150 And now, instead of to Homa, what I'm going to do is in quotes, I'm going to pass in whatever the 173 00:12:16,150 --> 00:12:17,620 name of the font family is. 174 00:12:17,920 --> 00:12:20,380 And that's going to match up with whatever is shown here. 175 00:12:20,390 --> 00:12:21,670 So it's just Malala. 176 00:12:21,940 --> 00:12:23,050 You can go ahead and copy that. 177 00:12:24,520 --> 00:12:26,050 And then come back here and place that in. 178 00:12:27,400 --> 00:12:31,000 And now I see I'm using Malala on my Web page. 179 00:12:31,420 --> 00:12:38,050 The one caveat is this does add a tiny bit of loading time to your website because of the fact that 180 00:12:38,050 --> 00:12:42,700 it needs to load up and connect to this API here. 181 00:12:42,970 --> 00:12:46,480 However, that loading times should be minuscule compared to other things happening on your page. 182 00:12:46,690 --> 00:12:52,120 So it's really not a big deal to connect to the fonts Google APIs, especially for how easy it makes 183 00:12:52,390 --> 00:12:53,830 the use of new fonts. 184 00:12:54,130 --> 00:13:00,550 So again, you just go to the font store google.com, figure out a font you like, figure out the actual 185 00:13:00,550 --> 00:13:00,930 family. 186 00:13:00,940 --> 00:13:03,940 It should essentially just be the name with pluses instead of the spaces there. 187 00:13:04,240 --> 00:13:09,130 Connect that load that up in your style sheet, and then you can come here and actually refer to the 188 00:13:09,340 --> 00:13:11,890 family to any sections of text you want. 189 00:13:12,550 --> 00:13:12,820 OK. 190 00:13:13,360 --> 00:13:13,780 Thanks. 191 00:13:13,780 --> 00:13:14,860 And I'll see you at the next lecture.