Open In App

How to import Google Fonts in HTML ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Choosing the right font for your webpage is a very important aspect of any design. Using a web font service enables you to use a wide variety of fonts fit for presenting the data on your webpage. Google Fonts is a free web font service that hosts a huge variety of fonts to choose from. We can use these fonts in our webpages. To use a custom font, we need to import the font family from the web font service, Google Fonts, in this case.

Method 1: Using <link> tag

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

Method-2: Using @import rule

@import url(‘https://fonts.googleapis.com/css?family=Poppins’);

Example 1:

html




<!DOCTYPE html>
<html>
 
<head>
    <link href=
        rel='stylesheet' />
    <style>
        h1 {
            font-family: Sofia;
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
</body>
 
</html>


Output:

Example 2:

html




<!DOCTYPE html>
<html>
 
<head>
    <style>
        @import url(
        h1 {
            font-family: 'Open Sans', serif;
            color: green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
            GeeksforGeeks
    </h1>
    </center>
</body>
 
</html>


Output:



Last Updated : 04 Aug, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads