Join Justin Seeley for an in-depth discussion in this video Adding Google fonts to your project, part of Building a Responsive Portfolio Site.
- View Offline
- As I mentioned earlier, we're gonna make use of Google Web Fonts in this project. That means that we're gonna have a little bit more rich typography than just a regular ole website might have. And in this movie, I'm gonna show you how to quickly get a hold of the Google Fonts that you want and how to add them into your HTML documents pretty easily. So we're going to go to www.google.com/fonts and once you're on this website, what I want you do to is come up here to the top left corner and in this little search box, I want you to search for a font called Abel, A-B-E-L and once you do that it should show up right here in the main window, and what we're looking for here is this little button, right over to the right, that's says Quick Use when you hover over it.
When you click on that button, it's going to take you to this page righ here, where you're able to see all of the different style of Abel that you are able to include inside of your document. In this case, there's only one style, Normal 400 Weight. So what we're going to do is we're going to scroll down the page a bit and once we scroll down the page, you're gonna see that this little standard section here is where we can copy this code in order to add it into out HTML document, linking to is basically as a CSS file. So what we're gonna do is copy this to our clipboard, Command or Control + C then we're going to go back over into our indexed.HTML document and as you can see here, it's already linking to our external style.css, which we added in the last movie.
Now what we're gonna do is we're gonna go to line 18 and on line 18 we're just going to paste in a link to Abel. Then we're going to hit a return there and on line 19 we're gonna add a link to the other font that we're going to use. So let's go back to Google Fonts for a moment and when we're back on the Google Fonts page, what I wanna do is go back and add more fonts, so what we're going to do now is search right here for a font called Satisfy and once we find Satisfy, you can see it's a nice little script font. And so I'm gonna click on the Quick Use button again, scroll down just a bit, and we'll grab this link for Satisfy.
And we'll go back over into Coda and on line 19 inside of our document, we're going to paste in the link to that, just like so. And you're gonna notice that my text sort of wraps to the next line, that's perfectly okay. It's just because I have my font size turned up a little bit inside of my editor, so that you can see what I'm doing. So I put a little return in there as well, so line 20's gonna be blank, just so I have little bit of differentiation between the fonts that I'm linking to and the CSS right there. So I've linked perfectly well to my CSS for Abel and Satisfy and I'm now ready to start using those as font families inside of my CSS documents.
- Planning and setting up an HTML layout
- Creating responsive CSS grids
- Incorporating web and icon fonts
- Building a layout with the Skeleton grid
- Styling the website
- Using jQuery for simple lightbox effects
- Testing a website's responsiveness
- Adjusting media queries