Serve a Static HTML Page for Development

Use a Custom Font from Google Fonts on a Static HTML Webpage

Add Emojis to a Static HTML Page

Make a Responsive Web Page Without Using a CSS or JavaScript Framework

Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript

Accept User Input with a Styled Input Tag, a Button, and Vanilla JavaScript

Add and Remove CSS Classes with Vanilla JavaScript

Make a One-time CSS Animation that Does Not Revert to its Original Style

Add a Dynamic Tweet Button to a Webpage

Turn an SVG Into a Favicon and Link it

Deploy and Host a Static Webpage for Free with Netlify

Create and Deploy a Basic Static HTML Website

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.

Course

Create and Deploy a Basic Static HTML Website

Use a Custom Font from Google Fonts on a Static HTML Webpage

Share this video with your friends