This write-up will guide you in the following aspects regarding the google fonts:
Step by Step guide for Google Fonts
In order to use the google fonts you have to follow the following steps:
First Step
Visit the Google fonts official website and the following window will appear:
Second Step
Select the category/ font family of your choice:
Third Step
Select the google font of your choice(e.g. quintessentia):
Now click on the “select this style”:
Fourth Step
Copy the link of the selected style from the window that appear on the right side of the screen:
Paste the link in the head section of the HTML document:
Fifth Step
Copy the CSS rules for font-family
And paste it in the CSS file:
We want to apply the style on the <p> element so we paste it in the p selector. Now we will get the following output:
The output shows that the a google font “Quintessential” is implemented on the <p> element successfully.
How to use various Google Fonts
All the procedure will be same, select the multiple google fonts, copy the link and paste it in the HTML file’s head section:
HTML
<head>
<link rel="stylesheet" href="fonts.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Comforter&family=Open+Sans:wght@300&family=Quintessential&display=swap" rel="stylesheet">
</head>
<body>
<h3>CSS Fonts </h3>
<p> First Paragraph</p>
<p> Second Paragraph</p>
</body>
</html>
CSS
Now we select two different google fonts i.e. “Comforter”, and “Open sans”, we want to use “Comforter” for the <h3> element and “Open sans” for the <p> elements. So, our CSS will look like this:
font-family: 'Comforter', cursive;
}
p{
font-family: 'Open Sans', sans-serif;
}
In the CSS file, paste the CSS rules in element selectors to style them according to the choice. It will yield the following output:
Output proves that the CSS rules are implemented successfully on the HTML elements.
How to style Google Fonts
With the help of CSS properties we can style the google fonts according to our choice, our HTML file will remain the same and CSS file will look like this:
CSS
font-family: 'Comforter', cursive;
color: red;
text-shadow: 5px 5px 5px #83647e;
}
p{
font-family: 'Open Sans', sans-serif;
color: red;
text-shadow: 5px 5px 5px #83647e;
}
The output of the above-given snippet will appear like this:
Conclusion
To add google fonts, search for the google fonts, select the font category and family, then select the font style of your choice. Once you select the font, “copy the font link”, from the “selected families windows” and paste it in the head section of the HTML file. Next, copy the “CSS rules for fonts’ link” and paste it into the CSS selector. Styling can be added to the google fonts using the CSS properties.
