html

How to Use Google Fonts in HTML and CSS

There are numerous fonts available in HTML and CSS but if you are not satisfied with the standard HTML/CSS fonts and opt for some new, fresh and latest fonts then you can use google fonts. Google font is google’s online library that allows us to use different font families through CDN (acronym of content delivery network) which is free to use for everyone.

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

<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:[email protected]&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:

h3{
    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

h3{
    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.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.