1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Chris AchardChris Achard
    cssCSS
    htmlHTML 5

    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;

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.