Web Design

Using Google Fonts

Adding nice-looking fonts to the website

What’s so special about fonts?

Fonts make or break a website. You want to use clean fonts that don’t make your users uncomfortable or displeased.

Types of Fonts

There are 3 main types of fonts: Serif, Sans-Serif, and Display. Serif fonts are more like Times New Roman, very strict. Sans-Serif is a lot more rounder, modern, such as Helvetica, DM Sans, Poppins, and more. Display are neither of these, and are very unique and special cases.

Google Fonts

The best place to get free fonts that look great is Google Fonts. You can select whatever font families you want, and it adds it to your selection. Click on the selections in the bottom right. Then, click Customizations. Then, select all the font-weights available. This will allow you to be able to access 100-900 font-weights.

Adding them to the file

Either create a new html file or use the index.html file. Delete everything in it, and replace it with:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <title>My Blog</title>
  </head>
  <body>
<h1>My Blog</h1>
  </body>
</html>

The meta tags make sure when we start creating our website that everything looks good regardless of the viewport.

Now, copy the Embed Font code from Google Fonts. Paste it inside of your header. If you get an error, delete the '&display=swap'.

Now, add your styles.css file to the header.

<head>
    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
</head>

Adding the font to the styles.css

Inside styles.css, copy the Specify in CSS portion. Add the code to the body in CSS.

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

Now, if you refresh your page, the font should’ve changed. You can give certain elements certain fonts. In the next lesson, we will be going over icon families with Font Awesome.

chevron_up