Home » Learn Code » CSS3 » How to use google fonts in HTML and CSS?

How to use google fonts in HTML and CSS?

  • CSS3
  • 3 min read
how to use google fonts

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 in 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 click on font you will go to the font page where all styles of that font listed like this:

roboto google font example

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

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">
   <title> my webpage <title>
   <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2? 
   family=Roboto:[email protected]&display=swap" rel="stylesheet">


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

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 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 font name.

Another way to add fonts is by downloading. We will this in our later chapters that how to add downloaded fonts in 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 Reply

Your email address will not be published. Required fields are marked *