1 00:00:05,790 --> 00:00:06,780 Welcome back. 2 00:00:06,960 --> 00:00:13,760 In this last part of our CSSA crash course we're going to quickly discuss Funk's we can apply custom 3 00:00:13,760 --> 00:00:17,530 fonts to our Web sites through the use of font properties in the CSA. 4 00:00:17,600 --> 00:00:23,090 Let's quickly explore how we can use the Google font API to add custom fonts as well as we can explore 5 00:00:23,120 --> 00:00:26,610 various font properties such as font sizes and font families. 6 00:00:26,690 --> 00:00:31,000 We'll get started by jumping over to the text editor and later we'll head over to the browser. 7 00:00:31,460 --> 00:00:34,150 OK here we have a basic thought HCM elf file. 8 00:00:34,160 --> 00:00:39,050 I also have a master that see SS that it's linked to with no actual links right now. 9 00:00:39,060 --> 00:00:42,070 Any tags or any styles that are basic H-2A smell. 10 00:00:42,110 --> 00:00:44,490 Let's add a few element components. 11 00:00:44,540 --> 00:00:48,200 We'll have a Heading 1 and we'll just have the same header one. 12 00:00:48,460 --> 00:00:52,330 And then let's quickly add two paragraphs so I'll say a paragraph. 13 00:00:52,370 --> 00:00:58,950 And if you begin typing Lorem you should see larm some pop up enter and then will autocomplete that 14 00:00:58,970 --> 00:01:04,700 generic Lorem of some text which is just filler Latin text and create another paragraph except this 15 00:01:04,700 --> 00:01:08,480 one will give it a specific ID of two. 16 00:01:08,480 --> 00:01:13,880 That way we can make sure to differentiate it from the first paragraph tag and then we'll say warm gypsum 17 00:01:14,270 --> 00:01:16,430 enter and save. 18 00:01:16,430 --> 00:01:21,850 So basically we just have three components here a heading and then two paragraphs one of them with a 19 00:01:21,860 --> 00:01:23,230 specialized ID. 20 00:01:23,570 --> 00:01:29,160 Let's refresh our page and I get to see no header Lorem Ipsum and then ipsum. 21 00:01:29,170 --> 00:01:31,950 Now let's mess around with the actual C Ss. 22 00:01:32,120 --> 00:01:35,590 So let's imagine that we want to actually change the font being used. 23 00:01:35,870 --> 00:01:42,410 Keep in mind that is available on every OS so only certain fonts are available on Windows and certain 24 00:01:42,410 --> 00:01:49,280 fonts are available on Macs and you can check out the CSSA file for this particular lecture for wikipedia 25 00:01:49,280 --> 00:01:54,410 links on the list of typefaces that are included of Microsoft Windows and Elyssa type places that are 26 00:01:54,410 --> 00:02:00,970 included with Mac OS so let's say I want to change the actual font of the header. 27 00:02:01,340 --> 00:02:10,050 I can say H-1 and then I'll say Fonte dash family and I can change it to be cursive. 28 00:02:10,050 --> 00:02:12,140 So I'll see cursive there save. 29 00:02:12,320 --> 00:02:17,460 And then when I refresh notice now it's technically in cursive. 30 00:02:17,560 --> 00:02:22,940 Now this may not look like cursive but it's the way the browser is going to represent this particular 31 00:02:22,940 --> 00:02:24,800 style of cursive. 32 00:02:24,800 --> 00:02:32,780 We can also do other font families like monospace save that hit refresh and then I see a monospace font 33 00:02:32,840 --> 00:02:38,690 for that heading and the previously mentioned inside the CSSA file we have commented links as far as 34 00:02:38,690 --> 00:02:42,230 the list of typefaces that are included that differ operating systems. 35 00:02:42,230 --> 00:02:46,280 So if you go to one of those links for example the one for Microsoft and zoom out here a bit so we can 36 00:02:46,280 --> 00:02:47,000 see it. 37 00:02:47,120 --> 00:02:49,860 I can see the list of typefaces included Microsoft Windows. 38 00:02:50,030 --> 00:02:54,870 So since I'm running on Windows I could technically choose any of these for my actual styling. 39 00:02:55,070 --> 00:02:58,010 So for instance let's choose this font right here. 40 00:02:59,100 --> 00:02:59,790 Colibri. 41 00:02:59,830 --> 00:03:03,270 So I'll say font family and paste it in. 42 00:03:03,310 --> 00:03:06,570 Save it and then for the basic one for refresh. 43 00:03:06,580 --> 00:03:08,510 Now I have that specific font. 44 00:03:08,800 --> 00:03:13,780 I can continue it down maybe use something like console this grab that. 45 00:03:14,320 --> 00:03:20,050 Copy paste save it refresh and not showing that font type. 46 00:03:20,350 --> 00:03:23,210 OK there's other things we can't continue to edit. 47 00:03:23,440 --> 00:03:31,660 Let's do this on our paragraph Ted so we can edit the font size so I can say font size and then specify 48 00:03:31,930 --> 00:03:33,380 the font size in pixels. 49 00:03:33,430 --> 00:03:38,610 So if all my paragraphs appear larger I can say show them as 20 pixels. 50 00:03:38,710 --> 00:03:43,310 I'll come over here and refresh and now I can see that my paragraphs are now larger. 51 00:03:43,360 --> 00:03:45,340 Keep in mind I'm zoomed in here. 52 00:03:45,490 --> 00:03:52,820 We can also do things like affect the font style or font white so I can say font weights and make this 53 00:03:52,850 --> 00:03:54,400 bold or normal. 54 00:03:54,440 --> 00:03:58,670 Some of these won't be actually effective on certain families. 55 00:03:58,700 --> 00:03:59,690 Just keep that in mind. 56 00:03:59,740 --> 00:04:03,940 Not every font family can be made bold or italics but most normal ones can. 57 00:04:04,190 --> 00:04:11,860 So if I refresh Now I could see everything in bold and maybe we can also say font style will say font 58 00:04:11,860 --> 00:04:14,900 style then it can have it be a taluk or normalized. 59 00:04:14,980 --> 00:04:17,200 So say it taluk refresh. 60 00:04:17,230 --> 00:04:22,170 And now I see everything that's paragraph in bold metallics and there there's also text properties. 61 00:04:22,180 --> 00:04:23,510 That's the last one I want to mention. 62 00:04:23,800 --> 00:04:29,800 So you can align the text give it shadow transform it so a text line is probably the most commonly used 63 00:04:29,800 --> 00:04:34,250 one and it just whether you want to align it left right justified or center. 64 00:04:34,480 --> 00:04:36,100 So let's go ahead and do Center here. 65 00:04:36,250 --> 00:04:41,600 And if I refresh this now I see everything center along my browser center here. 66 00:04:41,970 --> 00:04:48,450 OK so those are various font parameters or attributes that you'll be playing around with in your C Ss. 67 00:04:48,460 --> 00:04:53,950 The last thing I want to explore is actually grabbing a font from online and then implementing it into 68 00:04:53,950 --> 00:04:54,720 your web site. 69 00:04:54,940 --> 00:05:00,610 And the best site for this is the Google font API and the best way to find this is if you go to your 70 00:05:00,610 --> 00:05:02,970 browser and expand the right here. 71 00:05:03,210 --> 00:05:06,870 And if you google search Google fonts you should be able to find here. 72 00:05:06,910 --> 00:05:09,170 The Fahnestock Google dot com. 73 00:05:09,220 --> 00:05:15,440 Go ahead and select the and then you'll be able to see a list of all the Google fonts so we can see 74 00:05:15,440 --> 00:05:15,830 here. 75 00:05:15,830 --> 00:05:17,420 Sunflower open sands. 76 00:05:17,450 --> 00:05:22,130 And you can actually search so there's a search capability and you can sort it by trending. 77 00:05:22,130 --> 00:05:25,980 Most popular alphabetical search ones that look more like handwriting. 78 00:05:26,000 --> 00:05:27,100 See different categories. 79 00:05:27,110 --> 00:05:29,930 You can choose so let's choose a very unique one. 80 00:05:29,930 --> 00:05:35,830 The specifica looks pretty unique so once you actually want it you can actually edit by typing in here. 81 00:05:35,870 --> 00:05:37,670 So let's say we like the specific font. 82 00:05:37,700 --> 00:05:39,570 We want to include it in our Web site. 83 00:05:39,590 --> 00:05:45,020 I could just click here on the plus button select this font and you should see a little one family select 84 00:05:45,020 --> 00:05:47,270 that pop up over here on the bottom. 85 00:05:47,270 --> 00:05:52,640 Expand that and this will inform you on how to actually add this into your website to notice. 86 00:05:52,640 --> 00:05:54,020 Do you have this link. 87 00:05:54,260 --> 00:05:58,560 And that's basically a style sheet reference to this particular font. 88 00:05:58,760 --> 00:06:04,610 So there's two steps of this one is adding this link to the HVM L and the second one is specifying the 89 00:06:04,610 --> 00:06:08,870 font family insider SS So let's grab this link. 90 00:06:08,870 --> 00:06:11,030 We're going to copy this. 91 00:06:11,430 --> 00:06:16,910 We're going to come back here to basic thought Tim L and in addition to our master that see SS. 92 00:06:17,040 --> 00:06:19,500 I'm going to add in that link to the stylesheet. 93 00:06:19,800 --> 00:06:22,330 So let me zoom out so you can see this here. 94 00:06:22,450 --> 00:06:26,020 I'm just copying and pasting that same link that Google fonts provided. 95 00:06:26,100 --> 00:06:33,290 So link a reference to the Google fonts API and then we see the family relations style sheet. 96 00:06:33,300 --> 00:06:38,830 Save that change come back to your C Ss over here and the for the font family. 97 00:06:38,850 --> 00:06:43,400 You're going to again copy and paste the command was given to you by Google fonts. 98 00:06:43,440 --> 00:06:47,060 So here we can specify font family Pacific go cursive. 99 00:06:47,130 --> 00:06:48,340 Copy this. 100 00:06:48,340 --> 00:06:51,870 And now let's apply it to the heading 1. 101 00:06:52,080 --> 00:06:54,240 So we'll save that and in fact let's apply it. 102 00:06:54,240 --> 00:06:55,750 Everything on the page. 103 00:06:56,000 --> 00:06:58,450 So I'll say it for the paragraph as well. 104 00:06:58,590 --> 00:07:04,110 We'll come back to our basic h him l that's linked here and I'm going to refresh. 105 00:07:04,320 --> 00:07:09,340 And now I see everything in that Google fonts API font family style. 106 00:07:09,480 --> 00:07:10,540 Pretty easy right. 107 00:07:10,560 --> 00:07:16,470 So now you have full access to all the Google fonts simply by adding a link to your HVM L and then by 108 00:07:16,470 --> 00:07:21,000 adding in the font family call inside your CSSA file again. 109 00:07:21,030 --> 00:07:22,720 Let's quickly go over those steps. 110 00:07:22,770 --> 00:07:25,480 All you need can do is come to Fahnestock Google dot com. 111 00:07:25,620 --> 00:07:31,120 Select the fonts you like and you can select multiples just add with the plus signs. 112 00:07:31,140 --> 00:07:37,320 Expand this window you'll get a list for what link you should provide in your stylesheet and then how 113 00:07:37,320 --> 00:07:40,500 to specify these font families inside your C S S call. 114 00:07:40,610 --> 00:07:46,130 They just add that link to your mail and then specify that C Ss is the font family. 115 00:07:46,470 --> 00:07:48,600 OK that's it for this lecture. 116 00:07:48,600 --> 00:07:49,460 Hope you enjoyed it. 117 00:07:49,470 --> 00:07:53,670 Coming up next we'll have a quick crash course assessment to make sure you understood all these new 118 00:07:53,670 --> 00:07:55,790 skills and see assess will see.