Font Demo

Video Demo Here.

Instructions

  1. Open Google Fonts and find one you like. Then click it.
  2. Next, on the font's "detail page," scroll down until you see specific font weights. Then, click the plus sign next to the font weight that you want to use on the right-hand side of the weight listed. You may click as many font weights as you want.
  3. When you've clicked all of the font weights you want, click on the three boxes with a plus sign at the top, right-hand side of your screen. A right-hand menu will open that will show you two pieces of code:
    • The stylesheet you need to link to
    • The font family name that you will use to apply the font to specific selectors.
  4. Copy the link to the font stylesheet:
    • You can either paste a tag in the head section of your HTML
    • Alternatively, you can reference the stylesheet in your CSS using an @import statement.
  5. Finally, scroll down a bit to the "CSS rules to specify families" and copy the style declaration. Paste this rule into any ruleset to apply it to a specific element or elements.