How to use google fonts in HTML and CSS?

Don’t know how to use google fonts in HTML and CSS? Don’t worry this is very simple. Go to site fonts.google.com.

The homepage will look like this below:

google fonts homepage

Now choose which font you want to add to your website. You can also search font by font names in the search bar if you have any specific font in your mind. After choosing the font, click on the font box.

After clicking on the font you will go to the front page where you can find all font types like this:

roboto google font example

All font styles are listed as regular, bold, medium, black, etc. Now click on the +Select this style as shown in the image above. An

font sidebar

Two Steps to add this Font to your website

  1. Copy the first code and paste it in head section of your HTML document. Like this:
<!DOCTYPE html>
<html lang="en-US">
<head>
   <title> my webpage <title>
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2? 
   family=Roboto:wght@700&display=swap" rel="stylesheet">
<head>
<body>
 
</body>
</html>

2. Copy the second code as shown in the above image and paste it into the CSS file. Add the CSS code in the CSS file. Like this

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

Now open your file in chrome browser or any other browser and see. Google font has successfully been installed on your website.

Tip: What are the Different Types of Fonts in CSS? How to find free Fonts for the Website?

font-family: ‘Robot’ , sans-serif; ???

Font-family is the CSS property to change the font families in CSS. With this property, you can change any font on your website. Remember always to add double or single quotes around the font name.

Another way to add fonts is by downloading. We will this in our later chapters that how to add downloaded fonts to a website.

Note: Sans-serif fonts are considered more readable on computer devices. So, you should use sans-serif fonts.

I hope you understood well. If you have any issue in adding google fonts please tell me in the comment section below.

Leave a Comment