Google, since 2010, has provided a platform for users to discover fonts and use them freely. There are over 800 font families available through Google Font's main website, and we'll use one of them in this exercise.
Google made it very easy to import a font. The following are the steps to incorporate a font on our website:
- Go to the Google Font website (https://fonts.google.com/).
- Search for our font, Roboto, and click on the corresponding font (https://fonts.google.com/specimen/Roboto).
- Click on SELECT THIS FONT.
- Click on the little popup at the bottom and switch to the CUSTOMIZE tab.
- We want to have regular and bold.
- Switch back to the EMBED tab and copy the code displayed:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
- Copy and paste this code just before our previous CSS link:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/font.css"> <!-- Font face CSS link -->
You have now your Google Font installed!
Now, to use our Google Font, simply paste the CSS property on the element we want to stylize:
font-family: 'Roboto', sans-serif;
Let's go to our CSS file, located in css | main.css.
Find the section with the following comment:
/* ==========================================================================
Author's custom styles
========================================================================== */
Here, write:
body {
font-family: 'Roboto', sans-serif;
}
This will apply the font-family property to the <body> element, which is the main element of our HTML page, so it will be applied to all elements inside <body>.