1
00:00:01,270 --> 00:00:02,320
Welcome back.

2
00:00:02,350 --> 00:00:06,460
And in this video, we're going to be talking about text and font.

3
00:00:07,810 --> 00:00:12,110
Let's go back to the about page looks quite lonely and empty right now.

4
00:00:12,520 --> 00:00:16,840
I'm going to turn off the hover effect because it can get kind of annoying after a bit.

5
00:00:18,450 --> 00:00:21,300
Let's remove that here and refresh.

6
00:00:22,320 --> 00:00:28,140
All right, perfect indeed about a Schimel, let's try and make this text a little bit prettier.

7
00:00:29,010 --> 00:00:34,920
So I'm going to do our little short moment with sublime text, so lorem and then make sure I close off

8
00:00:34,920 --> 00:00:35,680
this bettag.

9
00:00:36,210 --> 00:00:42,780
All right, so I'm going to show you a few text properties that we can add going back to style.

10
00:00:42,990 --> 00:00:50,550
And I'm going to remove the paint color so we only have this to worry about and refresh.

11
00:00:50,760 --> 00:00:57,690
And you'll see here that it's still not green because this has higher specificity than this.

12
00:00:57,840 --> 00:01:02,490
Again, if you don't know what that means, just check out my previous video.

13
00:01:04,390 --> 00:01:12,820
The first one I'm going to show you is called Text Decoration, and very simply, this one you can do

14
00:01:13,150 --> 00:01:15,130
underline refresh.

15
00:01:15,340 --> 00:01:17,200
You get a nice underline.

16
00:01:17,210 --> 00:01:19,360
You can also do a line through.

17
00:01:20,560 --> 00:01:27,280
Fresh and there you go, nice light to the next one is text transformed.

18
00:01:29,610 --> 00:01:32,790
And this one can do something like upper case.

19
00:01:34,450 --> 00:01:39,910
And you can transform the entire text and to uppercase, you can do lowercase with this as well, but

20
00:01:39,910 --> 00:01:41,590
you can try that out on your own.

21
00:01:42,440 --> 00:01:43,960
Next one is line height.

22
00:01:44,210 --> 00:01:46,260
So in line you can put the pixels.

23
00:01:46,270 --> 00:01:48,820
So we want 20 pixels of space.

24
00:01:49,360 --> 00:01:52,120
There's a line height if we do two hundred pixels.

25
00:01:53,360 --> 00:02:00,320
You can see that that's a lot of spacing, so let's keep it at 20 just because that looks nicer, refresh

26
00:02:00,830 --> 00:02:01,400
perfect.

27
00:02:01,880 --> 00:02:03,940
Next one is kind of like this.

28
00:02:03,940 --> 00:02:05,840
So I'm going to keep this I'm going to add it to the bottom.

29
00:02:06,500 --> 00:02:09,760
The next one is font style.

30
00:02:10,310 --> 00:02:20,890
You can said something like italic save fresh nice italic lettering, the next one less to font weight.

31
00:02:21,320 --> 00:02:24,920
And here you can actually do a number of between one hundred and nine hundred.

32
00:02:25,190 --> 00:02:28,070
Or you can do just simply something like bold.

33
00:02:28,640 --> 00:02:31,820
And obviously that changes the weight of the font.

34
00:02:32,030 --> 00:02:38,060
We also have something like font size, obviously want to change the size of the text and you can do

35
00:02:38,210 --> 00:02:39,320
something like percentage.

36
00:02:39,350 --> 00:02:43,120
So one hundred percent if you do that, nothing changes.

37
00:02:43,130 --> 00:02:45,140
But if you do one hundred and fifty percent.

38
00:02:46,420 --> 00:02:52,980
Well, that gets one hundred fifty percent bigger if you do 80, you'll get 80 percent of the original.

39
00:02:53,290 --> 00:02:57,160
And then finally, I also want to show you Phonte family.

40
00:02:58,150 --> 00:03:00,880
So this is where you get to pick what kind of font you want.

41
00:03:00,910 --> 00:03:05,550
So if you want something like Georgia, I save refresh.

42
00:03:05,920 --> 00:03:08,260
We got that nice little font.

43
00:03:08,440 --> 00:03:13,860
If you have something that is multiple words, you'll have to use quotation marks.

44
00:03:13,870 --> 00:03:19,300
So if you have something like Times New Roman, you'll have to write it like that.

45
00:03:19,300 --> 00:03:24,400
And a special quality of font family is that you'll see a lot of this.

46
00:03:26,480 --> 00:03:34,550
This means that on whosever laptop the website opens on, if that computer doesn't have times new Roman,

47
00:03:34,760 --> 00:03:40,280
then print the text in Georgia and you can have multiple of these separated by comma.

48
00:03:41,180 --> 00:03:49,040
And that might sound surprising to you, but fonts are simply pieces of information that each computer

49
00:03:49,040 --> 00:03:53,270
has, but it's not equally distributed amongst everybody.

50
00:03:53,480 --> 00:03:59,560
So some computers might have certain kinds of font like times new Roman and others might not.

51
00:03:59,870 --> 00:04:03,680
And you can check online which fonts are available in Windows and Macs.

52
00:04:03,920 --> 00:04:10,940
But keep that in mind that you want to think about fonts and how your websites kind of display because

53
00:04:11,120 --> 00:04:15,020
a user might not have that specific font on their laptop.

54
00:04:15,290 --> 00:04:18,320
Now, two questions might pop in your head right now.

55
00:04:18,680 --> 00:04:25,100
One is, well, Andre, what if I have this super awesome custom font and I want to use that?

56
00:04:25,220 --> 00:04:32,750
And the second one is, how do we make sure that a user always sees the same font on a Web website,

57
00:04:33,350 --> 00:04:35,020
even if they don't have it on their computer?

58
00:04:35,300 --> 00:04:36,280
So how can you do this?

59
00:04:36,560 --> 00:04:44,540
One way is to actually include a font file that you have on your computer with all your website files.

60
00:04:45,140 --> 00:04:52,730
But I'm going to show you an easy way that a lot of developers use and it's free and that is Google

61
00:04:53,060 --> 00:04:53,630
fonts.

62
00:04:56,910 --> 00:05:03,600
Google phones actually has these free fonts that you can use and there's a ton of them, anything that

63
00:05:03,600 --> 00:05:06,320
you find here is more than enough.

64
00:05:06,330 --> 00:05:11,120
And I've used this many times when building websites, it's a great, great resource.

65
00:05:11,130 --> 00:05:12,390
I really like this one.

66
00:05:12,960 --> 00:05:16,530
So let's pick this one, Poiret one.

67
00:05:17,040 --> 00:05:23,010
And you can see over here that you can play around and see what it looks like.

68
00:05:24,150 --> 00:05:30,600
You can also see the size difference, and if you click the plus sign over here.

69
00:05:32,640 --> 00:05:39,000
You'll see at the bottom that I have a selected item, and if I click on it, it shows me how I can

70
00:05:39,000 --> 00:05:40,530
add it to my website.

71
00:05:41,010 --> 00:05:44,190
So first thing we want to do is we want to copy this.

72
00:05:44,190 --> 00:05:46,260
And this might look familiar.

73
00:05:46,380 --> 00:05:49,200
And this link tag, which is a stylesheet.

74
00:05:50,590 --> 00:05:54,740
Has a reference to fonts, Google APIs, dot com.

75
00:05:55,060 --> 00:06:02,230
We're saying, hey, grab the fonts before you load up this ASML file on my webpage, load it up with

76
00:06:02,230 --> 00:06:04,180
the fonts that are found at this website.

77
00:06:05,670 --> 00:06:11,760
So, yes, if this website is down and let's say there's no Internet access, they won't be able to

78
00:06:11,760 --> 00:06:12,390
love those fonts.

79
00:06:12,390 --> 00:06:14,330
But it's Google, we can trust them.

80
00:06:14,340 --> 00:06:16,340
Most likely they're going to be online.

81
00:06:16,530 --> 00:06:21,410
And the second one you can see over here what we can add to our case file.

82
00:06:21,450 --> 00:06:22,560
So we just copy that.

83
00:06:24,810 --> 00:06:29,310
Go to associate and let's change this to our new Google Fund.

84
00:06:30,170 --> 00:06:31,100
I say that.

85
00:06:32,050 --> 00:06:34,600
Let's go to our page and refresh.

86
00:06:37,230 --> 00:06:40,710
That is nice and pretty, let's make that bigger just so we can see it.

87
00:06:42,950 --> 00:06:47,210
Well, we obviously need some line spacing here so we can do line height.

88
00:06:48,610 --> 00:06:49,600
Fifty pixels.

89
00:06:51,130 --> 00:06:51,710
There you go.

90
00:06:52,000 --> 00:06:57,550
One thing you might think about, and this is something that we'll get into in the advanced section,

91
00:06:58,090 --> 00:07:06,760
is that by loading this, we're actually making our website a tiny bit slower, because now in order

92
00:07:06,760 --> 00:07:12,970
for this website to load, we need to grab the stylesheet that we've created.

93
00:07:13,420 --> 00:07:17,740
Plus, go to this link and grab our font.

94
00:07:19,240 --> 00:07:24,910
Again, something that we don't want to worry about yet, but things to keep in mind and in the advanced

95
00:07:24,910 --> 00:07:27,700
section, we'll cover that a little bit further.

96
00:07:29,290 --> 00:07:34,780
There you have it, there are your general text based farm based properties.

97
00:07:35,440 --> 00:07:36,290
I'll see you in the next one.

98
00:07:36,610 --> 00:07:36,990
Bye bye.