Alright, so now as I said, we're going to add a custom Google Font locally to the project. The reason being that we want this to cache and function offline in our pw A. So to start with, we're going to go find a Google Font. So we're going to go fonts dot google COMM And you can see that there's a wide variety of fonts here. And what I like to do is we can actually hover over one and instead of a sentence, we can click custom. And then we can put in whatever our title is going to be.
And then we can click down here apply to all fonts. And so now you can see what your title would look like in every font at a glance. This is, in my opinion, the best way to find a appropriate font for the title you're using. And so I already know which font I would like so I'm just going to search it. And so you can choose as many fonts as you want. And then eventually, you're going to use this plus button to select it.
So we have one family selected, we're going to open that up, and we're going to download this selection. So this is going to download as a zip file. And we're going to show this folder, and Ctrl x. And if we all tab down, we can actually go back into our assets folder that we previously had. And we're going to paste that in here. Right click, extract all and we're going to extract it all into this folder.
And you can see we have the font file here. So we're going to Ctrl C. And we're going to actually put this into our assets folder again, just like we did with our image. And we're going to have this font folder here that we're going to create. I had created it previously and we're going to copy In this, we're also just going to rename it something a little simpler. So Alex, stash brush. And All right, cool.
Now we're going to go into our CSS. And we're going to organize that a little bit first. So first, actually, let's organize this, let's just have some space is kind of between here. And this is kind of a separate thing. So we'll just leave space for that. And in here as well.
Actually, we need to kind of shift stuff over and we're going to separate this. So this is for our main title. And this stuff is for our video. Alright, so We're going to now use an import statement in our CSS to import our custom font. So we're going to do at font dash face, you can see that it comes up there already. And curly brackets, font family, again, autocomplete.
And then we're going to type in the custom name that we made. Brush, semi colon. And then we're going to have a SRC source. And we're going to make it a URL bracket. Again, we're going to use dot dot slash to go up to our assets folder, our font folder and Alex. Brush font.
And then we're going to need to change this from Helvetica to Alex stash brush, and we're going to comma and then add sans serif just in case it doesn't load. Alright, so we can go back and Check that out. Close this for now. All right, so we have our title here, we could probably stand to make that a little bit bigger. And we actually probably want to center it vertically and horizontally as well. So we're gonna go back to our code, we'll increase the font size to five REM instead of three.
And then in order to center it, we're actually going to modify our home ID properties. So we're going to go hashtag home to target our home ID. And we're going to start by adding actually a background color of black. So a black background will happen before our video if it doesn't load correctly. And then we're going to use Flexbox. We're going to initialize that with display, flex.
And then we're going to align items, center and This is for centering vertically. And then we're going to use justify content center and this will align everything horizontally. Okay, so we can Alt Tab back to our project. And yeah, that's looking a little bit better, but maybe that top is a little bit too much now. So let's give that a top of 30% instead. Okay, that's in the center.
Looking looking pretty great if I do say so myself. So, that's it for now. And in the next one, we're going to import our Font Awesome icons so that we can have our little social social media links down here below our title. Alright, so I'll see you in that one. Bye for now.