Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,360 --> 00:00:01,320
Welcome back.
2
00:00:01,500 --> 00:00:06,750
And in this video we're gonna be talking about text and font.
3
00:00:06,870 --> 00:00:11,620
Let's go back to the about page looks quite lonely and empty right now.
4
00:00:11,640 --> 00:00:18,570
I'm gonna turn off the hover effect because it can get kind of annoying after a bit let's remove that
5
00:00:18,570 --> 00:00:21,300
here and refresh.
6
00:00:21,370 --> 00:00:21,630
All right.
7
00:00:21,630 --> 00:00:22,540
Perfect.
8
00:00:22,590 --> 00:00:30,220
In the about a [REMOVED] let's try and make this text a little bit prettier so I'm going to do our little
9
00:00:30,220 --> 00:00:32,170
short command with sublime text.
10
00:00:32,170 --> 00:00:35,480
So Laura hmm and then tab.
11
00:00:35,510 --> 00:00:36,890
There you go.
12
00:00:36,890 --> 00:00:39,380
Make sure I close off this p tag.
13
00:00:39,380 --> 00:00:40,030
All right.
14
00:00:40,130 --> 00:00:49,340
So I'm going to show you a few text properties that we can add going back to style and the first one
15
00:00:49,350 --> 00:01:00,010
I'm going to show you is called text decoration and very simply this one you can do underline refresh
16
00:01:00,340 --> 00:01:02,110
you get a nice underline.
17
00:01:02,110 --> 00:01:06,350
You can also do line through refresh.
18
00:01:06,440 --> 00:01:07,700
And there you go.
19
00:01:07,700 --> 00:01:12,130
Nice line through the next one is text transform
20
00:01:14,610 --> 00:01:22,690
and this one can do something like uppercase and you can transform the entire text and to uppercase
21
00:01:22,720 --> 00:01:27,360
you can do lowercase with this as well but you can try that out on your own.
22
00:01:27,370 --> 00:01:29,170
Next one is line height.
23
00:01:29,170 --> 00:01:31,200
So in line Hind you can put the pixels.
24
00:01:31,210 --> 00:01:34,600
So we want 120 pixels of space.
25
00:01:34,850 --> 00:01:35,890
There's a line height.
26
00:01:35,890 --> 00:01:41,170
If we do two hundred pixels you can see that that's a lot of spacing.
27
00:01:42,110 --> 00:01:43,120
So let's keep it at 20.
28
00:01:43,120 --> 00:01:44,860
Just because that looks nicer.
29
00:01:45,100 --> 00:01:46,300
Refresh.
30
00:01:46,300 --> 00:01:47,370
Perfect.
31
00:01:47,380 --> 00:01:51,780
Next one is kind of like this I'm going to keep this I'm going to add it to the bottom.
32
00:01:52,030 --> 00:01:55,570
The next one is font style.
33
00:01:55,570 --> 00:02:07,120
You can set something like italic save fresh nice a italic lettering the next one less to font weight.
34
00:02:07,180 --> 00:02:13,810
And here you can actually do a number between 100 and 900 or you can do just simply something like bold
35
00:02:14,500 --> 00:02:17,820
and obviously that changes the weight of the font.
36
00:02:17,830 --> 00:02:24,370
We also have something like font size obviously want to change the size of the text and you can do something
37
00:02:24,370 --> 00:02:27,750
like percentage so 100 percent if you do that.
38
00:02:27,790 --> 00:02:34,330
Nothing changes but if you do one hundred and fifty percent bold I gets 150 percent bigger.
39
00:02:34,400 --> 00:02:39,010
You do 80 you will get 80 percent of the original.
40
00:02:39,120 --> 00:02:43,810
And then finally I also want to show you font family.
41
00:02:43,940 --> 00:02:46,640
So this is where you get to pick what kind of font you want.
42
00:02:46,640 --> 00:02:51,700
So if you want something like Georgia I save refresh.
43
00:02:51,710 --> 00:02:54,120
We got that nice little font.
44
00:02:54,230 --> 00:02:59,660
If you have something that is multiple words you'll have to use quotation marks.
45
00:02:59,660 --> 00:03:08,340
So if you have something like Times New Roman you'll have to write it like that and a special quality
46
00:03:08,340 --> 00:03:17,880
of font family is that you'll see a lot of this this means that on who's ever laptop the website opens
47
00:03:17,880 --> 00:03:25,710
on if that computer doesn't have Times New Roman then print the text in Georgia and you can have multiple
48
00:03:25,710 --> 00:03:35,070
of these separated by comma and that might sound surprising to you but fonts are simply pieces of information
49
00:03:35,070 --> 00:03:36,940
that each computer has.
50
00:03:37,170 --> 00:03:40,860
It's not equally distributed amongst everybody.
51
00:03:40,860 --> 00:03:47,420
So some computers might have certain kinds of font like times you Roman and others might not.
52
00:03:47,490 --> 00:03:53,370
And you can check online which fonts are available in Windows and Macs but keep that in mind that you
53
00:03:53,370 --> 00:04:00,810
want to think about fonts and how your sites kind of display because a user might not have that specific
54
00:04:00,810 --> 00:04:02,840
font on their laptop.
55
00:04:02,850 --> 00:04:06,230
Now two questions might pop in your head right now.
56
00:04:06,240 --> 00:04:11,890
One is Andre what if I have this super awesome custom font and I want to use that.
57
00:04:11,960 --> 00:04:20,490
And the second one is how do we make sure that a user always sees the same font on a Web site even if
58
00:04:20,490 --> 00:04:21,690
they don't have it on their computer.
59
00:04:22,050 --> 00:04:23,230
So how can you do this.
60
00:04:23,280 --> 00:04:31,590
One way is to actually include a font file that you have on your computer with all your Web site files.
61
00:04:31,830 --> 00:04:39,450
But I'm going to show you an easy way that a lot of developers use and it's free and that is Google
62
00:04:39,840 --> 00:04:40,290
fonts
63
00:04:43,640 --> 00:04:49,590
Google fonts actually has these free fonts that you can use and there's a ton of them.
64
00:04:49,700 --> 00:04:53,060
Anything that you find here is more than enough.
65
00:04:53,120 --> 00:04:56,350
And I've used this many times when building Web sites.
66
00:04:56,420 --> 00:04:57,830
It's a great great resource.
67
00:04:57,830 --> 00:04:59,060
I really like this one.
68
00:04:59,690 --> 00:05:08,870
So let's pick this one POI read one and you can see over here that you can play around and see what
69
00:05:08,870 --> 00:05:10,900
it looks like.
70
00:05:10,930 --> 00:05:20,290
You can also see the size difference and if you click the plus sign over here you'll see at the bottom
71
00:05:20,290 --> 00:05:23,580
that I have a selected item.
72
00:05:23,580 --> 00:05:27,710
And if I click on it it shows me how I can add it to my Web site.
73
00:05:27,730 --> 00:05:33,160
So first thing we want to do is we want to copy this and this might look familiar.
74
00:05:33,160 --> 00:05:42,340
And this link tag which is a style sheet has a reference to fonts Doug Google API dot com we're saying
75
00:05:42,340 --> 00:05:49,390
Hey grab the fonts before you load up this a sheet metal file on my Web page load it up with the funds
76
00:05:49,420 --> 00:05:50,830
that are found at this Web site.
77
00:05:51,610 --> 00:05:57,850
So yes if this Web site is down and let's say there's no internet access they won't be able to load
78
00:05:57,850 --> 00:06:00,250
those fonts but it's Google we can trust them.
79
00:06:00,250 --> 00:06:02,960
Most likely they're going to be online.
80
00:06:03,130 --> 00:06:08,020
And the second one you can see over here what we can add to our CSF file.
81
00:06:08,020 --> 00:06:16,660
So we just copy that go to our site sheet and let's change this to our new Google font.
82
00:06:16,790 --> 00:06:18,590
I save that.
83
00:06:18,590 --> 00:06:21,890
Let's go to our page and refresh.
84
00:06:22,130 --> 00:06:23,810
Look at that.
85
00:06:23,850 --> 00:06:25,300
That is nice and pretty.
86
00:06:25,320 --> 00:06:29,520
Let's make that bigger just so we can see it.
87
00:06:29,540 --> 00:06:40,260
Well we obviously need some line spacing here so we can do a line height 50 pixels there your beautiful
88
00:06:40,260 --> 00:06:41,610
novel right here.
89
00:06:41,610 --> 00:06:46,710
So that's how you want to add fonts to customize your Web site.
90
00:06:46,710 --> 00:06:52,170
One thing you might think about and this is something that we'll get into in the advance the asset section
91
00:06:52,830 --> 00:07:01,560
is that by loading this we're actually making our Web site a tiny bit slower because now in order for
92
00:07:01,560 --> 00:07:11,670
this Web site to load we need to grab the small sheet that we've created plus go to this link and grab
93
00:07:11,760 --> 00:07:18,590
our font again something that we don't want to worry about yet but things to keep in mind.
94
00:07:18,680 --> 00:07:22,940
And in the advanced section we'll cover that a little bit further.
95
00:07:22,940 --> 00:07:25,070
But there you have it.
96
00:07:25,130 --> 00:07:30,320
There are your general text based font based properties.
97
00:07:30,320 --> 00:07:31,670
I'll see you in the next one by.
9369
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.