Use a Custom Font from Google Fonts on a Static HTML Webpage
With a basic webpage complete, we'll add a custom font to patio11bot. First, go to https://fonts.google.com/ choose the fonts you want, and then add them to your page like this:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400|Work+Sans" rel="stylesheet">
font-family: 'Open Sans', sans-serif;
Instructor: [00:00] We have our simple HTML page running locally. Let's clean up the design by adding a custom font. We can go to fonts.google.com and browse all the different fonts. I know I want one called "Open Sans." I'll select it with the plus button.
[00:16] If I click on this info box, where it says, "Family Selected," then I can customize what I'm loading on the page. I'll select regular, light, and light italic. Back in the Embed tab, you can see the link that you would use right now just to load that font.
[00:31] If I want another font, then I can go back to the fonts and search for the one I want, which is called "Work Sans," and add that one with a red plus as well. Now, in the "Families Selected" box, we can see the link tag for both Open Sans and Work Sans. Let's copy that. In our HTML document, we can paste that into our head.
[00:55] Also, on the Google Fonts page, we can see how to use those fonts in our CSS. We can copy this Open Sans line. In our style.css file, we can change all of the font on our page at once by pasting that line into the body style. If we refresh now, we can see that new font family.
[01:14] Google Fonts is a super-nice way to add custom fonts when developing a simple web page because there's almost no custom work needed to make it work. Just link to the Google Font CDN and use the font family directly.
[01:25] Since we linked multiple fonts and weights, we can do things like change the header to use a thinner font. We could use the other font, Work Sans, for the question-answer section by using its font family as well. When we reload, we can see those new fonts.