2.3 Fonts and Link Tags
1.Introduction2 lessons, 05:34
2.Structuring Your HTML9 lessons, 1:03:52
3.Styling the Page5 lessons, 43:27
4.Conclusion1 lesson, 00:31
2.3 Fonts and Link Tags
Hello, and welcome back. In this lesson, we're going to pull in the font that we're going to be using. As we saw before, when we were looking through our Photoshop file, the main font that's used all through this webpage is Roboto. And we can find that on fonts.google.com. So I'm gonna jump into a browser, and I'm going to navigate there. And once we get there, we can just do a search here for Roboto, and here it is right here. I'm gonna click on a little plus icon to select the font. And then, if we click down here at the bottom, where it says 1 Family Selected. It will expand that out, and if we go to Customize, we can choose the different font weights that we want to include. So I want to include 100, 300, 400, and 900. That should get us everything that we need. So once I've got all four of those selected, we can go back to the EMBED tab here. And it will give us the embed link that we need to use. So I'm going to highlight this link tag, and then we're going to copy it. And I'm gonna jump back into File Explorer here. We ended with site001 in our last lesson inside the ProjectFiles folder. And for this particular lesson, we're going to start where we left off. But I'm going to create it as a new folder, so I'll just copy and paste that one. And I'm going to change the name to site002. So all of the changes we make in this lesson, you'll be able to look at those changes in the site002 folder inside your ProjectFiles folder. So I'm gonna right click on site002 and I'm gonna open that with Visual Studio Code. And here we go, and I've got a couple of versions of code open here. And I'm gonna close the older version. And now we just have site002 open. We can also jump into our ProjectFiles folder, go into site002 and double click on index.html to open up this new version. So now let's jump back into code. And I'm gonna go into our index.html file and I'm going to paste our link. And you'll see here that we have a link for Bootstrap. So I'm going to immediately after that link paste the link tag that we copied here. And you can see that it includes all of the different weights that we're gonna be using. Now if you end up not using one of these weights, it's a good idea to go ahead and delete that weight. So if you never use 300, you probably wanna get rid of that and one of the commas, obviously. That way it doesn't take quite as long to load those fonts. You only wanna load the ones that you need. Now we're also going to be using Font Awesome in this course for some of our icons. So we can do another search here in Google for Font Awesome. And in fact, I wanna do a search for Font Awesome CDN. I wanna find the CDN link. That will get us there, and here we go. I'm gonna highlight this and copy it. It should copy just when you click on it. And then we'll jump back into our index.html file, and we'll create another link tag here. So, We'll set the href= to the URL that we just copied. And then we'll set rel="stylesheet", and there we go. So that gets us our link tags, and then I wanna do one more thing here. I wanna create a new file in our CSS folder. And I'm just gonna call it site.css. And then I want to link to that site.css file in our index.html file. So right after our Font Awesome, we're gonna create one more link tag. And I'm gonna set the href to css/site.css. And that gets us all of the css that we need to move forward. So now we'll be doing all of our custom CSS Inside this site.css file that's in our CSS folder. So thank you for watching, and we'll move forward in the next lesson.