💻
HTML/CSS
  • Overview
  • How the Web Works
    • DNS, TCP/IP, HTTP, HTML
    • Anatomy of a Web Page
    • How a Web Page Gets Loaded
  • HTML/CSS intro
    • HTML
      • Boilerplate HTML
      • HTML Hierarchy
      • Meta Section
      • Text-formatting Elements
      • Image
      • Video
      • Anchor
      • Tables
      • Semantic Elements
    • CSS
      • Properties
      • Selectors
      • Box-Model
      • Block vs Inline
      • The Cascade
    • Layout
      • Container Elements
      • Grid vs Flexbox
      • Flexbox
      • Grid
  • Miscellaneous Topics
    • Background Image
    • Border-radius
    • Box-shadow
    • Centering Elements
    • Colors
    • Custom Properties
    • Forms
    • Typography
    • Units
  • Appendix
    • Google Fonts
    • Lorem Ipsum
    • HTML Cheatsheet
    • CSS Cheatsheet
    • Browser Support for HTML/CSS
    • unsplash.com (free images)
    • pexels.com (free images)
    • Chrome Default Stylesheet
  • Further Learning Resources
    • FE Mentor Challenges
    • Free Scrimba Courses
    • Kevin Powell Youtube
Powered by GitBook
On this page
  • Loading a Google Font
  • Add the Import Code to Your Site
  • Resources

Was this helpful?

  1. Appendix

Google Fonts

PreviousUnitsNextChrome Default Stylesheet

Last updated 3 years ago

Was this helpful?

Google has a collection of free fonts you can use in your web pages. This topic covers the steps to access them and include them in your pages.

Loading a Google Font

First, search for the specific typeface you want to use. In this example, we'll search for the Poppins font. Click on the link to go to the page for the font.

Next, select the specific font you want to import. For example, I've selected "Extra-light 200".

Next, click on the Select this style button to bring up the font detail box on the right.

To include an external font, there are two methods.

  • As a <link> element in the <head> section of the HTML document.

  • As an @import in your stylesheet.

Add the Import Code to Your Site

Choose the method you want to use to import the font and then copy the import code and paste it into your HTML <head> element if you are using the <link> option or at the top of your stylesheet if you are using the @import method.

In the Resources section, there is a link to a discussion on stackoverflow.com that suggests that the <link> method is preferred.

Resources

Typography
Including Google Fonts link or import?Stack Overflow
Logo