How to use Google Fonts in CSS?

Last Updated : 12 Nov, 2024

Google Fonts in CSS allows you to easily include and style web fonts by linking to a font's URL and applying it via the font-family property in your stylesheet. The library contains a vast collection of fonts that can be used in web design, mobile apps, etc.

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';
}

Steps to include Google fonts in CSS

To add Google Fonts to a webpage, simply link the font's script using the Google Font API, as shown 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.

Example 1: Using Google Fonts "Montserrat" to the heading text.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
    <style>
        h1 {
            font-family: 'Montserrat', sans-serif;
        }
    </style>
</head>

<body>
    <h1>Google Font Example</h1>
    <p style="color: green;">Style to be implemented</p>
</body>

</html>

Output

google-font-example — google font example

Example 2: Using the "Roboto Slab" font to the body content.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet'>
    <style>
        body {
            font-family: 'Roboto Slab', serif;
        }
    </style>
</head>

<body>
    <h1>Google Fonts Example</h1>
    <p>Hello users</p>
</body>

</html>

Output

google-font-examples — using roboto slab google font

Example 3: The implementation of multiple fonts using Google fonts. To add multiple fonts, use the pipe symbol ( | ) to separate them.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://fonts.googleapis.com/css?family=Borel|Noto+Sans|Handjet' 
          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>first font</h2>
    <h3>Multiple Fonts</h3>
</body>

</html>

Output

How to use Google Fonts in Tailwind CSS?

ajaymakvana

Improve

Article Tags :

How to use Google Fonts in CSS?

Steps to include Google fonts in CSS

Similar Reads

Thank You!

What kind of Experience do you want to share?