Original subtitles

Welcome back.

And in this video we're gonna be talking about text and font.

Let's go back to the about page looks quite lonely and empty right now.

I'm gonna 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.

In the about a [REMOVED] let's try and make this text a little bit prettier so I'm going to do our little

short command with sublime text.

So Laura hmm and then tab.

There you go.

Make sure I close off this p tag.

All right.

So I'm going to show you a few text properties that we can add going back to style and 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 line through refresh.

And there you go.

Nice line through the next one is text transform

and this one can do something like uppercase 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 Hind you can put the pixels.

So we want 120 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 I'm going to keep this I'm going to add it to the bottom.

The next one is font style.

You can set something like italic save fresh nice a italic lettering the next one less to font weight.

And here you can actually do a number between 100 and 900 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 100 percent if you do that.

Nothing changes but if you do one hundred and fifty percent bold I gets 150 percent bigger.

You do 80 you will get 80 percent of the original.

And then finally I also want to show you font 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 who's ever 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.

It's not equally distributed amongst everybody.

So some computers might have certain kinds of font like times you 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 sites 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 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 site 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 Web site 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 fonts 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 Web sites.

It's a great great resource.

I really like this one.

So let's pick this one POI read 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 Web site.

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 style sheet has a reference to fonts Doug Google API dot com we're saying

Hey grab the fonts before you load up this a sheet metal file on my Web page load it up with the funds

that are found at this Web site.

So yes if this Web site is down and let's say there's no internet access they won't be able to load

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 CSF file.

So we just copy that go to our site sheet and let's change this to our new Google font.

I save that.

Let's go to our page and refresh.

Look at that.

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 a line height 50 pixels there your beautiful

novel right here.

So that's how you want to add fonts to customize your Web site.

One thing you might think about and this is something that we'll get into in the advance the asset section

is that by loading this we're actually making our Web site a tiny bit slower because now in order for

this Web site to load we need to grab the small sheet 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.

But there you have it.

There are your general text based font based properties.

I'll see you in the next one by.