🔤 TUTORIAL: How to Import Custom Fonts

Google Fonts: @import via CSS

There are multiple ways to load custom fonts into your webpage, but the simplest method involves keeping everything style-related in the CSS file.

1. Open your web browser and go to Google Fonts.
2. Browse or filter search for the font(s) you want to use.
3. Click on a font to view its details.
4. Add it to your “shopping bag” 🛍️ by clicking

   You can still go back and pick more font families before importing them in the steps below!

5. After selecting your fonts, click on the (or the bag icon 🛍️) button at the TOP-RIGHT CORNER of the page.
6. Click then select the @import option:
7. Copy the generated statement only from @import until the semicolon ;

   🚫 DO NOT INCLUDE the <style></style> tags around the statement! Those are for if you’re loading the font via a HTML method, not the CSS way.

8. Open your style.css file in your project.
9. Paste the @import statement at the very TOP of your CSS file, above any selectors. Example:

      @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
   

10. Use the font-family property to apply the font to your elements. Example:

       body {
      font-family: "Roboto", sans-serif;
       }
    

    Make sure to SPELL the font name correctly and put it in " " quotes!!!

Put the font-family CSS rule inside a more specific selector, like h1 or .class-name, to apply a certain font more sparingly. See below for examples.

Full Example (with multiple fonts):

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* General font applied to most of the page */
body {
  font-family: "Roboto", sans-serif;
}

/* Display-style font for headings only */
h1, h2, h3 {
   font-family: "Oswald", sans-serif;
}

/* Unique font for a specific class */
.standout {
  font-family: "Dancing Script", cursive;
}