Welcome back.
And in this video, we're going to be talking about text and font.
Let's go back to the about page looks quite lonely and empty right now.
I'm going to turn off the hover effect because it can get kind of annoying after a bit.
Let's remove that here and refresh.
All right, perfect indeed about a Schimel, let's try and make this text a little bit prettier.
So I'm going to do our little short moment with sublime text, so lorem and then make sure I close off
this bettag.
All right, so I'm going to show you a few text properties that we can add going back to style.
And I'm going to remove the paint color so we only have this to worry about and refresh.
And you'll see here that it's still not green because this has higher specificity than this.
Again, if you don't know what that means, just check out my previous video.
The first one I'm going to show you is called Text Decoration, and very simply, this one you can do
underline refresh.
You get a nice underline.
You can also do a line through.
Fresh and there you go, nice light to the next one is text transformed.
And this one can do something like upper case.
And you can transform the entire text and to uppercase, you can do lowercase with this as well, but
you can try that out on your own.
Next one is line height.
So in line you can put the pixels.
So we want 20 pixels of space.
There's a line height if we do two hundred pixels.
You can see that that's a lot of spacing, so let's keep it at 20 just because that looks nicer, refresh
perfect.
Next one is kind of like this.
So I'm going to keep this I'm going to add it to the bottom.
The next one is font style.
You can said something like italic save fresh nice italic lettering, the next one less to font weight.
And here you can actually do a number of between one hundred and nine hundred.
Or you can do just simply something like bold.
And obviously that changes the weight of the font.
We also have something like font size, obviously want to change the size of the text and you can do
something like percentage.
So one hundred percent if you do that, nothing changes.
But if you do one hundred and fifty percent.
Well, that gets one hundred fifty percent bigger if you do 80, you'll get 80 percent of the original.
And then finally, I also want to show you Phonte family.
So this is where you get to pick what kind of font you want.
So if you want something like Georgia, I save refresh.
We got that nice little font.
If you have something that is multiple words, you'll have to use quotation marks.
So if you have something like Times New Roman, you'll have to write it like that.
And a special quality of font family is that you'll see a lot of this.
This means that on whosever laptop the website opens on, if that computer doesn't have times new Roman,
then print the text in Georgia and you can have multiple of these separated by comma.
And that might sound surprising to you, but fonts are simply pieces of information that each computer
has, but it's not equally distributed amongst everybody.
So some computers might have certain kinds of font like times new Roman and others might not.
And you can check online which fonts are available in Windows and Macs.
But keep that in mind that you want to think about fonts and how your websites kind of display because
a user might not have that specific font on their laptop.
Now, two questions might pop in your head right now.
One is, well, Andre, what if I have this super awesome custom font and I want to use that?
And the second one is, how do we make sure that a user always sees the same font on a Web website,
even if they don't have it on their computer?
So how can you do this?
One way is to actually include a font file that you have on your computer with all your website files.
But I'm going to show you an easy way that a lot of developers use and it's free and that is Google
fonts.
Google phones actually has these free fonts that you can use and there's a ton of them, anything that
you find here is more than enough.
And I've used this many times when building websites, it's a great, great resource.
I really like this one.
So let's pick this one, Poiret one.
And you can see over here that you can play around and see what it looks like.
You can also see the size difference, and if you click the plus sign over here.
You'll see at the bottom that I have a selected item, and if I click on it, it shows me how I can
add it to my website.
So first thing we want to do is we want to copy this.
And this might look familiar.
And this link tag, which is a stylesheet.
Has a reference to fonts, Google APIs, dot com.
We're saying, hey, grab the fonts before you load up this ASML file on my webpage, load it up with
the fonts that are found at this website.
So, yes, if this website is down and let's say there's no Internet access, they won't be able to
love those fonts.
But it's Google, we can trust them.
Most likely they're going to be online.
And the second one you can see over here what we can add to our case file.
So we just copy that.
Go to associate and let's change this to our new Google Fund.
I say that.
Let's go to our page and refresh.
That is nice and pretty, let's make that bigger just so we can see it.
Well, we obviously need some line spacing here so we can do line height.
Fifty pixels.
There you go.
One thing you might think about, and this is something that we'll get into in the advanced section,
is that by loading this, we're actually making our website a tiny bit slower, because now in order
for this website to load, we need to grab the stylesheet that we've created.
Plus, go to this link and grab our font.
Again, something that we don't want to worry about yet, but things to keep in mind and in the advanced
section, we'll cover that a little bit further.
There you have it, there are your general text based farm based properties.
I'll see you in the next one.
Bye bye.