Open In App

How to use Google Fonts in CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

Google Fonts provides a library of hundreds of free and open-source fonts that can be used in web design. we will explore how to use Google Fonts in CSS. The library contains a vast collection of fonts that can be used in web design, mobile apps, etc. 

In this article, we’ll see how to use Google fonts in CSS. Google Fonts provide us with API, we have to call that API so that we get a Javascript file or say script file which we have to include in our HTML code so that we can use different Google fonts. 

Syntax

The syntax for using Google Fonts in CSS is relatively simple. The first step is to link to the font using the HTML code below:

<link href=’https://fonts.googleapis.com/css?family=Font+Name’ rel=’stylesheet’>

Replace Font+Name with the name of the font you want to use. 

Next, we will add this language in our CSS file so this font will be applied to the particular portion of the webpage

body {
font-family: 'Font Name';
}

So this will apply or text written between body tags in HTML will have the above-mentioned font.

Approach

It is very easy to add Google Fonts to a webpage as mentioned below step by step how to do it. To add any type of font to our web pages we need to add that font script file in our webpage. so in the first step, we will add that script file to our webpage by making a simple API call to the Google Font API as mentioned below.

Step 1: If you want to use the Open Sans font, the HTML code to add the script file would be:

<link href=’https://fonts.googleapis.com/css?family=Open+Sans’ rel=’stylesheet’>

Step 2:The next step is to apply the font to your CSS code using the font-family property. For example:

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

This will set the font of the entire body of your web page to Open Sans. The sans-serif fallback is used in case the font fails to load or is not supported by the user’s browser.

We will understand the implementation with the help of code examples that uses the Google font in HTML.

Example 1: In this example, we are using Google Fonts “Montserrat” for our heading.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
    <style>
        h1 {
            font-family: 'Montserrat', sans-serif;
        }
    </style>
</head>
  
<body>
    <h1>Google Font Example</h1>
    <p style="color: green;">GeeksForGeeks</p>
</body>
  
</html>


Output:

gfg

Example 2: In this example, we will use the “Roboto Slab” font for our heading and body.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
    <style>
        body {
          font-family: 'Roboto Slab', serif;
        }
          
        h1 {
          font-family: 'Roboto Slab', serif;
        }
    </style>
</head>
  
<body>
    <h1>Google Fonts Example</h1>
    <p>Hello GFG users</p>
</body>
  
</html>


Output:

google font example

Using Multiple Google Fonts

We can use multiple Google Fonts in a single file also. We need to add a pipe symbol ( | ) to separate them.

Example: In this example, we will use multiple fonts.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link href=
          rel='stylesheet'>
    <style>
        h1 {
            font-family: 'Borel', cursive;
        }
  
        h2 {
            font-family: 'Noto Sans', sans-serif;
        }
  
        h3 {
            font-family: 'Handjet', cursive;
  
        }
    </style>
</head>
  
<body>
    <h1>Google Font Example</h1>
    <h2>GeeksForGeeks</h2>
    <h3>Multiple Fonts</h3>
</body>
  
</html>


Output:

gfg



Last Updated : 12 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads