1 00:00:02,120 --> 00:00:03,969 Now slowly but steadily, 2 00:00:03,969 --> 00:00:06,270 our first website is taking shape. 3 00:00:06,270 --> 00:00:07,103 And of course, 4 00:00:07,103 --> 00:00:09,340 we already learned a lot about web development 5 00:00:09,340 --> 00:00:10,640 at this point. 6 00:00:10,640 --> 00:00:13,270 Now, if we have a look at our content right now, 7 00:00:13,270 --> 00:00:16,550 we definitely see the impact of our styles. 8 00:00:16,550 --> 00:00:19,960 But what we also see is that we're using the same font 9 00:00:19,960 --> 00:00:22,690 for all the different kinds of texts we have. 10 00:00:22,690 --> 00:00:24,900 It's always the same sans serif font, 11 00:00:24,900 --> 00:00:27,880 this default sans serif font. 12 00:00:27,880 --> 00:00:30,530 And that's not necessarily wrong, 13 00:00:30,530 --> 00:00:33,140 but it's also very common that you want to use 14 00:00:33,140 --> 00:00:36,720 different fonts on your page, that you might 15 00:00:36,720 --> 00:00:40,130 want to use a different font family for the heading 16 00:00:40,130 --> 00:00:42,533 than you do for the rest of your content. 17 00:00:43,530 --> 00:00:45,900 And it is something which I want to do here as well. 18 00:00:45,900 --> 00:00:48,360 I want to use different fonts. 19 00:00:48,360 --> 00:00:51,310 Now when it comes to adding and using different fonts, 20 00:00:51,310 --> 00:00:53,039 that's always tricky. 21 00:00:53,039 --> 00:00:56,240 Font family sans serif is safe. 22 00:00:56,240 --> 00:01:00,060 Every operating system, and every browser supports that. 23 00:01:00,060 --> 00:01:03,893 The same would be true for serif, which was the default. 24 00:01:04,870 --> 00:01:08,800 But if you want to use a specific font family, like Arial, 25 00:01:08,800 --> 00:01:11,210 you can add that as well. 26 00:01:11,210 --> 00:01:14,850 And Arial actually would be very safe because that is a 27 00:01:14,850 --> 00:01:17,850 font family which is supported on a broad variety 28 00:01:17,850 --> 00:01:18,683 of systems, 29 00:01:18,683 --> 00:01:23,683 but not all font families are supported everywhere. 30 00:01:23,830 --> 00:01:28,830 And therefore often you need to also import a font family. 31 00:01:29,020 --> 00:01:32,880 So you will need to link your HTML file to the definition 32 00:01:32,880 --> 00:01:37,110 of a font family so that you can then safely use that 33 00:01:37,110 --> 00:01:40,910 font family in your file. And that's what I'll do now. 34 00:01:40,910 --> 00:01:43,970 And for this I'll use Google Fonts. 35 00:01:43,970 --> 00:01:48,920 Google Fonts is a webpage by Google, as the name implies, 36 00:01:48,920 --> 00:01:53,560 and you can visit fonts.google.com to reach this site. 37 00:01:53,560 --> 00:01:57,250 And Google Fonts is a page which gives you a broad variety 38 00:01:57,250 --> 00:02:00,040 of free to use fonts, 39 00:02:00,040 --> 00:02:04,500 which you can import into your HTML files to then use them. 40 00:02:04,500 --> 00:02:07,770 And you can browse this page to find the fonts 41 00:02:07,770 --> 00:02:09,000 you wanna use. 42 00:02:09,000 --> 00:02:12,710 And here in my case, I already know which fonts I want 43 00:02:12,710 --> 00:02:15,370 to use, so I'll search for them here. 44 00:02:15,370 --> 00:02:20,300 And I'll search for Fira because I'm looking for Fira Sans. 45 00:02:20,300 --> 00:02:24,440 And then you can always click on a font and see some 46 00:02:24,440 --> 00:02:26,970 previews for the different versions of that font, 47 00:02:26,970 --> 00:02:29,390 the different weights of that font. 48 00:02:29,390 --> 00:02:32,250 And here, I want to use the regular weight, 49 00:02:32,250 --> 00:02:34,650 the 400 weight in this case, hence, 50 00:02:34,650 --> 00:02:37,450 I'll click on select this style here, 51 00:02:37,450 --> 00:02:39,293 which opens this side menu. 52 00:02:40,530 --> 00:02:44,210 And I also want to use the bold version, the 700 version. 53 00:02:44,210 --> 00:02:47,220 So I'll also click on select this style. 54 00:02:47,220 --> 00:02:49,470 And the great thing about Google Fonts is that it 55 00:02:49,470 --> 00:02:51,730 automatically gives us some code, 56 00:02:51,730 --> 00:02:56,730 which we can add to our HTML file, to import these fonts 57 00:02:57,060 --> 00:03:00,330 to link our page to these fonts. 58 00:03:00,330 --> 00:03:03,772 And it's this code here, which we can copy now, 59 00:03:03,772 --> 00:03:08,470 and which we should add above our other link element 60 00:03:08,470 --> 00:03:12,153 in the head section of this HTML file. 61 00:03:13,750 --> 00:03:16,350 And you see what I imported here are, again, 62 00:03:16,350 --> 00:03:21,350 some link elements now just not pointing at one of our CSS 63 00:03:21,670 --> 00:03:24,680 files, but pointing at Google's servers, 64 00:03:24,680 --> 00:03:27,100 Google's computers somewhere else in the web. 65 00:03:27,100 --> 00:03:29,984 And in the end, they are on those servers, 66 00:03:29,984 --> 00:03:34,570 it is these font families that will be made available. 67 00:03:34,570 --> 00:03:38,820 So this simply imports the definitions for those 68 00:03:38,820 --> 00:03:42,640 font families from Google's servers. 69 00:03:42,640 --> 00:03:46,080 And that is worth noting that the ref value of link 70 00:03:46,080 --> 00:03:50,770 they offer can be a relative path to one of your files, 71 00:03:50,770 --> 00:03:53,843 but it can also be a full, absolute URL 72 00:03:54,840 --> 00:03:58,560 to some totally different computer, as it is here. 73 00:03:58,560 --> 00:04:02,730 Here, we're pointing at some server owned by Google 74 00:04:02,730 --> 00:04:06,806 and that's all also possible that ref value doesn't have 75 00:04:06,806 --> 00:04:10,840 to be a file owned by you, it can also be a link 76 00:04:10,840 --> 00:04:13,010 to another server. 77 00:04:13,010 --> 00:04:16,110 So now with that, we enable these fonts. 78 00:04:16,110 --> 00:04:18,959 And actually that's not the only font I want to add. 79 00:04:18,959 --> 00:04:21,880 Instead, if I go back to browse fonts, 80 00:04:21,880 --> 00:04:26,420 I also want to add the Oswald font here, this one. 81 00:04:26,420 --> 00:04:29,890 And there, I'm only interested in the bold version 82 00:04:29,890 --> 00:04:32,850 and hence I'll select this style as well. 83 00:04:32,850 --> 00:04:37,150 And now I'll copy the updated code here and replace 84 00:04:37,150 --> 00:04:41,380 my old code, which we added a minute ago with it. 85 00:04:41,380 --> 00:04:45,263 So that we now also imports this Oswald font. 86 00:04:46,430 --> 00:04:48,960 And you should only pick the font weights 87 00:04:48,960 --> 00:04:51,360 which you really plan on using here 88 00:04:51,360 --> 00:04:54,160 and not import everything which is available, 89 00:04:54,160 --> 00:04:56,370 because all of those fonts will be downloaded 90 00:04:56,370 --> 00:04:59,630 on the computers of your users of your website. 91 00:04:59,630 --> 00:05:01,590 And if you select everything here, 92 00:05:01,590 --> 00:05:03,800 your users will have to download a lot 93 00:05:03,800 --> 00:05:06,490 and that will slow your page down. 94 00:05:06,490 --> 00:05:09,653 So here I'm only picking what I plan to use. 95 00:05:11,467 --> 00:05:12,830 But with that added, if we reload, 96 00:05:12,830 --> 00:05:17,830 we see no change on our page, because now we do load all 97 00:05:18,150 --> 00:05:20,990 those fonts, but we're not using them. 98 00:05:20,990 --> 00:05:24,650 For this, we still need to define where to use which font. 99 00:05:24,650 --> 00:05:27,040 And at the moment in our CSS code, 100 00:05:27,040 --> 00:05:29,783 we're still always using the sans serif font. 101 00:05:31,020 --> 00:05:34,680 Now here instead now I want to use this Oswald font 102 00:05:34,680 --> 00:05:37,190 for my h1 title. 103 00:05:37,190 --> 00:05:40,570 And to do that, we now add Oswald here. 104 00:05:40,570 --> 00:05:44,160 However, you should add it between single quotes 105 00:05:44,160 --> 00:05:46,270 for those imported fonts. 106 00:05:46,270 --> 00:05:49,390 You should wrap their names in single quotes, 107 00:05:49,390 --> 00:05:51,053 and then add it like this. 108 00:05:51,910 --> 00:05:56,910 For the paragraphs, I now wanna use Fira Sans. 109 00:05:57,260 --> 00:06:01,063 And if you're not sure what the font family name is, 110 00:06:01,063 --> 00:06:02,710 what you should add here, 111 00:06:02,710 --> 00:06:04,950 you can always go back to Google Fonts 112 00:06:04,950 --> 00:06:06,670 because you see it down there. 113 00:06:06,670 --> 00:06:09,083 That's how you would add your font families. 114 00:06:10,060 --> 00:06:12,730 And here you actually see that the code looks a bit 115 00:06:12,730 --> 00:06:14,560 different than what I added. 116 00:06:14,560 --> 00:06:19,560 We have a comma sans serif after the Fira sans definition. 117 00:06:21,580 --> 00:06:24,810 And the reason for that is that we're defining a fallback 118 00:06:24,810 --> 00:06:26,770 font with that. 119 00:06:26,770 --> 00:06:31,230 Font family can be just one value as it was before, 120 00:06:31,230 --> 00:06:33,520 and as it still is at the moment, 121 00:06:33,520 --> 00:06:38,350 but you can add a comma separated list of multiple fonts, 122 00:06:38,350 --> 00:06:41,720 which will be parsed from left to right. 123 00:06:41,720 --> 00:06:45,640 And then those other fonts are fallback fonts. 124 00:06:45,640 --> 00:06:48,230 Hence, I'll also add it here for h1. 125 00:06:48,230 --> 00:06:51,930 That means that the browser will start with the first font, 126 00:06:51,930 --> 00:06:54,575 but if applying that font fails, 127 00:06:54,575 --> 00:06:58,830 because maybe loading that font from Google servers failed, 128 00:06:58,830 --> 00:07:01,740 because they were offline or anything like that, 129 00:07:01,740 --> 00:07:05,340 then the browser would move on to the next font in line 130 00:07:05,340 --> 00:07:06,390 and use that instead. 131 00:07:07,540 --> 00:07:11,020 And defining such fallback fonts is a good idea 132 00:07:11,020 --> 00:07:14,890 because it ensures that even if your main font fails 133 00:07:14,890 --> 00:07:17,450 and is unavailable, for some reason, 134 00:07:17,450 --> 00:07:21,620 you still have at least some font of your choice 135 00:07:21,620 --> 00:07:25,853 instead of some browser default fallback font being applied. 136 00:07:27,200 --> 00:07:32,200 And with that, if we now save this and then reload our page, 137 00:07:32,250 --> 00:07:34,260 now we see the text looks different. 138 00:07:34,260 --> 00:07:37,980 Now we've got our own custom fonts applied. 139 00:07:37,980 --> 00:07:41,010 And Google Fonts is an amazing service, 140 00:07:41,010 --> 00:07:44,540 which you typically will use a lot as a web developer, 141 00:07:44,540 --> 00:07:48,160 because for most websites you don't want to stick to the 142 00:07:48,160 --> 00:07:52,450 default sans serif fonts or the default fonts in general, 143 00:07:52,450 --> 00:07:54,540 but you want to bring your own fonts. 144 00:07:54,540 --> 00:07:58,530 And Google Fonts gives you a huge library of free to use 145 00:07:58,530 --> 00:08:00,690 and easy to use fonts. 146 00:08:00,690 --> 00:08:02,740 And it even gives you the code, 147 00:08:02,740 --> 00:08:06,010 which you need to add to then use those fonts. 148 00:08:06,010 --> 00:08:09,830 And now we're also using our own fonts from Google Fonts 149 00:08:09,830 --> 00:08:10,883 on this page.