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