Adding GoogleFonts to CSS File
Adding a GoogleFont to your CSS file is not only very easy but also a great way to spruce up your website or web application.
In this short tutorial, I’ll cover how to import a GoogleFont in a few, easy steps.
Step 1: GoogleFonts
Head over to the GoogleFonts site and browse the fonts. Choose a font that matches the personality and feel of your website.
Step 2: Choose a Font
Once you’ve found a font you like, be sure to select a few styles, so that you have variety of font styles to choose from when designing the typography of your website.
My recommendation is to select a regular 400, medium 500 and bold 700.
Step 3: Copy the link
Once you’ve selected your desired font and font styles, copy the link on the righthand side of the GoogleFont’s webpage. Then head over to your VS Code editor.
Step 4: Add the Link
In your index html file, add the GoogleFonts link in the <head> section of your file.
Step 5: Set the Font in CSS
Head over to your CSS file, then create a class rule to the body element in order to change the font. We’ll want to update the body because the font property is a property that will be inherited by all child elements of the parent body element.
Set the value of the font property to your imported GoogleFont in quotes. Just in case your font isn’t read by other browsers, it’s a best practice to also add a default font. Since “Inter” is a sans-serif type font, in this example, we’ll set our default font to “sans-serif”.
Voila! You’ve successfully added a GoogleFont to your website!
