You can access the full course here: Intro to Web Development with HTML and CSS
Tutorial
In this lesson, we look at a great resource for adding different fonts to your website.
Google Fonts
To use different style fonts on your website, Google Fonts ( https://fonts.google.com/ ) is a great resource. This site offers a wide variety fonts beyond those installed by default in your browser or operating system. You can scroll through many different examples or even type something in the text box provided to see how your specific text would look with various font styles.
Selecting Google Font
For an example, scroll down and select Goldman.
This takes you to a detail page for this font where you can make selections on exactly what style of this font you want. For this example, select the Regular 400.
Linking to Google Font
Next, click the button in the top right corner of the Google Fonts website that allows you to view your selected font families.
This opens a side panel where you can select how you want to access your selected font. From this panel copy the link tag information, then go back to index.html and paste the links in the Head (<head></head>) section of our web page.
<!DOCTYPE html>
<html>
<head>
<title>Learn web development on ZENVA.com</title>
<meta charset="UTF-8">
<meta name="description" content="This is what Google will show!">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
<!-- Link to Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Goldman&display=swap" rel="stylesheet">
</head>
<body>
<p>This paragraph contains <span class="keypoint">everything</span> you've always wanted to know!</p>
</body>
</html>Using Google Font
Back in the Google Font side panel below where we just copied the link information is instructions on how to include the font in your CSS Stylesheet. Copy this information and paste it into style.css in place of the font-family we setup in the last lesson.
body {
font-size:20px
}
p {
font-size:2rem;
/* new Google Font */
font-family: 'Goldman', cursive;
}
.keypoint {
font-style:italic;
font-weight:bold;
text-decoration:underline;
}
Our Paragraph text now appears with our newly included Google Font. Notice that the <span>everything</span> styling still applies.
Transcript
Hey everyone, and welcome back.
Google Fonts is a great resource if you want to use a large number of different fonts inside of your webpage. Because computers do have quite a large library of fonts pre-installed. But there is still a number of different fonts that are more specific to different styles, to handwritten styles that you might want to include on your website. And in that case, you can visit fonts.google.com, and this is a website where you can get a large number of different fonts, okay.
As you see, you can scroll down, see a preview of what they look like. You can even type something up here and it can basically preview what that text looks like. Okay, so let’s just say we wanna pick a text right here. Let’s just say we want this text right here, Goldman. We can select that, and it’ll bring us to this page here, okay. We want to go get the regular. So we’ll click Select this style right here.
This is then going to allow us to click on this button up here, at the top right, View your selected families. We’ll click on that. It’ll open up this side screen right here. And as you can see, we have this code right here, or this tag, this link tag that we can actually select. We can copy that with Control + C or Control + V.
We can go over to our HTML document, and add this just under where we specify the style sheet, okay. Paste that in with Control + V or Command + V. And there we go. So we are now able to use this Google font now that we have actually applied it to our webpage or to our HTML document, okay.
So how do we actually use it? Well, if we return to the Google Fonts site, you’ll see down here that it says CSS rules to specify families. And what we can do is copy that font-family CSS rule right there, go back to our CSS document. And I’m gonna replace this in the paragraph right here with that new one. So I’m gonna paste that in like so, click Run.
And there we go. We’ve got the new font, now applied to our text right here. And of course you can go through Google Fonts, choose all different ones. You can mix and match them with different spans, with different containers. Google Fonts is a great resource if you’re looking for a specific font, a specific style for your website. Thank you for watching.
Interested in continuing? Check out our all-access plan which includes 250+ courses, guided curriculums, new courses monthly, access to expert course mentors, and more!
