WEBVTT 0 00:00.140 --> 00:01.390 Woo hoo! 1 00:01.430 --> 00:03.170 I'm super, super excited. 2 00:03.590 --> 00:05.330 Man, I love this form example. 3 00:05.330 --> 00:06.940 It's just fun, you know. 4 00:06.950 --> 00:10.910 I know there's many different ways you can create forms and I hope you learn something new through this 5 00:10.910 --> 00:11.450 example. 6 00:11.450 --> 00:12.350 So let's get into it. 7 00:12.350 --> 00:14.840 As you recall, this is what our form looks like. 8 00:14.840 --> 00:19.190 We've wrapped it in a postcard image, and then we've got our own custom fonts, right? 9 00:19.190 --> 00:20.290 We've got our headings. 10 00:20.300 --> 00:21.530 Very, very cool. 11 00:21.530 --> 00:27.800 So the first step is before we even start coding our HTML and CSS, is we need to organize our assets. 12 00:27.800 --> 00:32.270 And what I mean by this, is that we need a few things before we can start coding. 13 00:32.270 --> 00:33.440 Can you guess what they are? 14 00:33.530 --> 00:34.310 Well, that's right. 15 00:34.310 --> 00:40.040 We need our postcard image itself. And I'm just going to have a PNG image for that. 16 00:40.040 --> 00:45.500 And then we've got our own custom fonts, we've got fonts for the heading and we've actually got a different 17 00:45.500 --> 00:48.950 type of font when it comes to the user typing their input. 18 00:48.980 --> 00:51.590 The postcard image is pretty straightforward, right? 19 00:51.590 --> 00:57.140 All we need is a PNG image and we're done. Fonts however, are a little bit more complex when it comes 20 00:57.140 --> 00:58.190 to coding. 21 00:58.190 --> 01:03.330 So let me just spend a little bit of time and explain to you how fonts work when it comes to front end 22 01:03.330 --> 01:03.900 dev. 23 01:04.110 --> 01:11.820 Firstly, we know that the fonts apply to your HTML can be controlled using the font-family property 24 01:11.820 --> 01:16.710 and this property takes one or more font-family names and the browser travels down the list until it 25 01:16.710 --> 01:20.520 finds a font that it has available on the system it is running on. 26 01:20.520 --> 01:24.840 For example, let's define font-family for a paragraph element. 27 01:24.870 --> 01:26.190 You've seen this before, right? 28 01:26.190 --> 01:27.210 Pretty straightforward. 29 01:27.210 --> 01:29.220 And this system works well. 30 01:29.250 --> 01:35.490 But traditionally, font choices were very limited and added a lot of overhead. 31 01:35.490 --> 01:37.020 Why did it add a lot of overhead? 32 01:37.020 --> 01:41.520 Well, because there are only a handful of fonts that you can guarantee will be available across all 33 01:41.520 --> 01:42.630 common systems. 34 01:42.660 --> 01:45.660 These fonts are known as web safe fonts. 35 01:45.660 --> 01:50.460 So what you can do as a developer is you can use the font stack to specify preferable fonts followed 36 01:50.460 --> 01:54.000 by web safe alternatives, followed by the default system font. 37 01:54.000 --> 01:58.980 But this adds overhead in terms of testing, to make sure that your design looks okay with each font, 38 01:59.010 --> 01:59.580 etc 39 01:59.580 --> 02:00.210 etc. 40 02:00.210 --> 02:01.950 So, what was introduced? 41 02:01.980 --> 02:05.370 ... 🥁 drumroll 🥁 ... web fonts. 42 02:05.400 --> 02:11.310 Web fonts work really well, and they allow your browser to download fonts. 43 02:11.310 --> 02:16.620 And it works really well because it dates right back to Internet Explorer version 6, waaaaay back in 44 02:16.620 --> 02:17.310 time. 45 02:17.310 --> 02:19.590 So it's super, super exciting. 46 02:19.590 --> 02:26.190 And because it allows your browser to download fonts, it means that any browser that supports web fonts 47 02:26.190 --> 02:31.080 can have exactly the same fonts you specify available to it. 48 02:31.110 --> 02:32.070 It's amazing. 49 02:32.070 --> 02:36.450 But in order to use it, we have to abide by certain syntax rules. 50 02:36.450 --> 02:40.260 In particular, we have to have the word @font-face. 51 02:40.290 --> 02:41.220 What does it look like? 52 02:41.220 --> 02:41.940 Well, let me show you. 53 02:41.970 --> 02:44.850 Let's now define an @font-face rule, right, 54 02:44.850 --> 02:45.990 or a block of code. 55 02:45.990 --> 02:49.290 And all we have to do is define the name of the font-family. 56 02:49.290 --> 02:51.510 The name of the font-family is a custom name. 57 02:51.510 --> 02:53.340 That's a name that you and I can give it. 58 02:53.340 --> 02:58.770 And then that src attribute is really important because the src attribute tells the browser where 59 02:58.770 --> 03:00.270 to fetch that font from. 60 03:00.270 --> 03:06.300 You can define an actual live URL or you can point to somewhere on your own PC or server. 61 03:06.300 --> 03:12.030 And what this means is that when you are defining styles later on in your CSS, for example, an h1 62 03:12.030 --> 03:18.300 tag, all we need to do is target that font-family that we defined, in our case aRandomCoolFont. 63 03:18.330 --> 03:20.550 If that's not found, the same rules apply. 64 03:20.550 --> 03:22.620 The browser is going to work its way down the list. 65 03:22.620 --> 03:28.080 In our case it's going to use sans-serif if that for some reason has not downloaded to the browser. 66 03:28.080 --> 03:29.190 Pretty cool, right? 67 03:29.310 --> 03:31.440 But ... and I always hate that word 68 03:31.440 --> 03:32.280 hey, BUT. 69 03:32.280 --> 03:34.230 But it does get a bit more complex than this. 70 03:34.230 --> 03:38.520 And there are two very important things to bear in mind about web fonts. 71 03:38.550 --> 03:46.050 #1, browsers support different font formats, and this means that typically you'll need multiple font 72 03:46.050 --> 03:48.930 formats for decent cross browser support. 73 03:48.930 --> 03:54.810 For example, most modern browsers support "woff" and "woff2", which just stands for web open font format 74 03:54.810 --> 03:58.560 versions one and two, and those are the most efficient formats around. 75 03:58.560 --> 04:05.600 But older versions of Internet Explorer only supported EOT, which is embedded opentype fonts, and 76 04:05.600 --> 04:11.210 you might even need to include an SVG version of the font to support older versions of iPhone and Android 77 04:11.210 --> 04:11.870 browsers. 78 04:11.870 --> 04:13.760 So that's the first thing I want you to keep in mind. 79 04:13.790 --> 04:19.430 #2, the second thing I want you to keep in mind is that fonts generally are not free to use. 80 04:19.460 --> 04:24.530 You have to pay for them, and/or follow other license conditions, such as crediting the font creator 81 04:24.530 --> 04:26.720 in the code or on your site. 82 04:26.720 --> 04:31.660 But luckily for us, some fonts are free and the ones I'm giving you are free. 83 04:31.670 --> 04:32.930 How did I get them? 84 04:32.930 --> 04:37.010 I went to fontsquirrel's webfont generator website. 85 04:37.010 --> 04:41.120 I then downloaded their file which was a ttf file. 86 04:41.120 --> 04:45.470 I then unzipped it and within that file I got the woff and the woff2 files. 87 04:45.470 --> 04:50.510 That's all I did. Very, very easy and I'm including it in my project directory. 88 04:50.510 --> 04:55.970 So I'm accessing these fonts directly rather than specifying a URL that the user has to travel over 89 04:55.970 --> 04:57.350 the net to get. 90 04:57.350 --> 04:59.840 I know, I know it's a lot to take in, but 91 05:00.320 --> 05:01.510 I hope you're learning something new. 92 05:01.510 --> 05:07.540 And before we get into coding our form, there's something else I just want to discuss, and that is 93 05:07.540 --> 05:11.350 how grids work, because I'm going to set up this postcard as a grid. 94 05:11.380 --> 05:12.730 See you in the next lecture.