⚠️ This lesson is retired and might contain outdated information.

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

Chris Achard
InstructorChris Achard
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 2 years ago

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.

egghead
egghead

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today