Using Google Fonts

There are over 1,400 fonts hosted by Google for you to use..

How to Use the Google Fonts Website

  1. Go to fonts.google.com
  2. Narrow fonts down by Categories
    • serif
    • sans-serif
    • display (fantasy)
    • handwriting (cursive)
    • monospace
  3. Narrow fonts down by Font properties
    • number of styles
    • thickness
    • slant
    • width
  4. Update the preview
    • type custom text (see how the fonts look with your text)
    • change the font size
  5. Click on a font you like
  6. Next to the style you like, click "Select +"
  7. Repeat until you have select all the fonts you want for your assignment
  8. Under Selected families, to the right, check the @import radio button
  9. Copy the @import line (not the <style> tags)
  10. Paste it into the top of your CSS stylesheet (must be at the top)
  11. Copy the font-family declarations
  12. Paste them into the CSS rules to use those fonts

An Example

This is an example where we selected TWO Google fonts. Both fonts are in the @import line.

@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Playfair+Display&display=swap');

h1 {
  font-family: 'Monoton', cursive;
  font-weight: normal;
}

p {
  font-family: 'Playfair Display', serif;
}