0 1 00:00:00,210 --> 00:00:05,740 Now, let's style the text. Font styles are applied from here. Which you are quite familiar with. 1 2 00:00:05,760 --> 00:00:11,460 First thing we need to do is to choose font, but unlike Figma, here we have limited selection of fonts. 2 3 00:00:11,610 --> 00:00:14,730 Our typefaces Poppins and Roboto aren't listed. 3 4 00:00:14,730 --> 00:00:17,670 This means we need to add these fonts from Project Settings. 4 5 00:00:20,530 --> 00:00:27,460 Project settings is a different place from the designer. And we can access fonts settings of this project 5 6 00:00:27,460 --> 00:00:30,030 from this link. Or from the hamburger menu, 6 7 00:00:30,040 --> 00:00:32,860 go to the projects settings, and then go under the fonts tab. 7 8 00:00:36,480 --> 00:00:38,580 Webflow gives us 3 options to add fonts. 8 9 00:00:38,580 --> 00:00:44,790 First, Google fonts which lists all the Google fonts. And to add them, we have to select and then add 9 10 00:00:44,790 --> 00:00:45,500 them one by one. 10 11 00:00:45,510 --> 00:00:47,580 We cannot add all of them at the same time. 11 12 00:00:47,700 --> 00:00:50,850 Also Adobe fonts or Typekit in a similar way. 12 13 00:00:50,880 --> 00:00:55,980 This, as I mentioned in the typography lesson, needs a subscription to Adobe's Creative Cloud. 13 14 00:00:55,980 --> 00:01:00,960 Once you have that subscription, then you can connect this with your account on Webflow and then you can 14 15 00:01:00,960 --> 00:01:06,390 pull fonts from there. And also we can manually add custom fonts just by uploading them. 15 16 00:01:06,390 --> 00:01:08,350 In our case we need Google fonts. 16 17 00:01:08,490 --> 00:01:10,530 So we're just gonna find Poppins. 17 18 00:01:10,530 --> 00:01:15,180 And once you find it, you select it and you'll be asked which variants you want to include. 18 19 00:01:18,030 --> 00:01:24,560 These numbers are font weights. CSS uses numerical values to represent different font weights, instead 19 20 00:01:24,560 --> 00:01:25,450 of like naming. 20 21 00:01:25,500 --> 00:01:31,620 And this is how it's commonly mapped. Figma can actually show these numerical values too. Inside Figma 21 22 00:01:31,650 --> 00:01:33,470 there is this tab called "code". 22 23 00:01:33,510 --> 00:01:36,720 This can show us CSS values for many of our elements. 23 24 00:01:36,720 --> 00:01:41,640 This code isn't really a production ready code, like Webflow generates, but it's useful in cases like 24 25 00:01:41,640 --> 00:01:42,980 this. Under font weight, 25 26 00:01:42,990 --> 00:01:45,300 we can see that our heading is 600. 26 27 00:01:45,300 --> 00:01:47,430 Let's check what other font weights we are using. 27 28 00:01:59,930 --> 00:02:06,160 So, we have 600, 500 and Normal for poppins. And we have Normal and 500 for Roboto. 28 29 00:02:06,230 --> 00:02:11,750 We could, of course, add all the weight variation, but it's a good practice to not add them. Because 29 30 00:02:11,750 --> 00:02:17,880 the Webflow has to then load them and sort of upload these fonts to the website. 30 31 00:02:18,170 --> 00:02:21,420 And this is going to add extra time to the page loading. 31 32 00:02:21,590 --> 00:02:26,660 Italics are separate versions for each weight as you can see. We haven't used any Italics in our design, 32 33 00:02:26,690 --> 00:02:29,570 but we should still add it for Regular and Bold weights. 33 34 00:02:33,520 --> 00:02:34,750 And done. It shows here 34 35 00:02:34,750 --> 00:02:39,510 what fonts and font styles we have added to our project. Now 35 36 00:02:39,530 --> 00:02:40,880 the same thing for Roboto. 36 37 00:02:44,360 --> 00:02:46,250 Let's also include bold 700. 37 38 00:02:46,280 --> 00:02:48,270 It's an important weight for paragraph text. 38 39 00:02:48,290 --> 00:02:54,870 Even if we haven't used it yet. In case, if you still had the designer open it's, not gonna show the 39 40 00:02:54,870 --> 00:02:58,080 new fonts right away. So refresh... refresh the designer. 40 41 00:03:02,560 --> 00:03:07,270 And there, now we have Poppins and Roboto inside. You'll see that the weights that we have added, they are 41 42 00:03:07,300 --> 00:03:10,450 inside and enabled. But those that we haven't added are disabled. 42 43 00:03:11,170 --> 00:03:16,270 Okay. So, let's style our text. Semi Bold was our heading. Regular for the paragraph. And Medium for 43 44 00:03:16,270 --> 00:03:16,720 the button. 44 45 00:03:31,670 --> 00:03:33,350 Now, for the sizes and line heights. 45 46 00:03:36,710 --> 00:03:39,080 Font size for our heading is 75 pixels. 46 47 00:03:42,580 --> 00:03:45,780 Webflow doesn't automatically adjust line height to defaults. 47 48 00:03:45,810 --> 00:03:47,970 It inherits values from the parent element. 48 49 00:03:47,990 --> 00:03:49,420 So we have to add it manually. 49 50 00:03:59,750 --> 00:04:13,460 And now we can do the same thing for the paragraph and the button text. 50 51 00:04:30,920 --> 00:04:32,210 Let's change the colors. 51 52 00:04:32,210 --> 00:04:33,350 This is quite straightforward. 52 53 00:04:33,350 --> 00:04:39,180 Just make sure to not confuse these two colors. One is Font color and down below is a Background color. 53 54 00:04:39,290 --> 00:04:44,690 We want to change the color in the Typography section. But the background color for the button. 54 55 00:05:07,680 --> 00:05:15,770 ♫ 55 56 00:05:19,330 --> 00:05:44,120 ♫ 56 57 00:05:44,470 --> 00:05:46,000 And that's our topography controls. 57 58 00:05:46,000 --> 00:05:49,680 There are other things we can do with typography, but we will leave those for later. 58 59 00:05:49,690 --> 00:05:54,760 So to recap. Adding fonts into Webflow projects happens from the Project Settings. We can easily add 59 60 00:05:54,760 --> 00:06:00,010 Google fonts directly from the dropdown. We have to choose specific font weights that we need. These font weights 60 61 00:06:00,010 --> 00:06:05,530 are represented in numbers, which we can either look up online, or find inside Figma under a Code tab. 61 62 00:06:05,530 --> 00:06:10,510 Then we have line heights. That we can grab the exact value of line heights again from the Code tab.