How to Import Google Fonts in HTML?

How to Import Google Fonts in HTML?

Last Updated : 23 Jun, 2024

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.

Below are the approaches to import the Google Font into the HTML document:

Table of Content

Using tag
Using @import rule

Using <link> tag

In this approach, we are using the link tag to add the google font link into out HTML document. It will allow us to use that specific font into out HTML document.

Syntax:

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

Example: This example shows the use of link tag for import of google font.

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://fonts.googleapis.com/css?family=Sofia'
        rel='stylesheet' />
    <style>
        h1 {
            font-family: Sofia;
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
</body>

</html>

Output:

Using @import rule

In this approach, we are using the @import url to import the google font. that will help us to access that specific google font into our HTML document.

Syntax

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

Example: This example shows the use of @import for import of google font.

html

<!DOCTYPE html>
<html>

<head>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Open+Sans);

        h1 {
            font-family: 'Open Sans', serif;
            color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>
            GeeksforGeeks
        </h1>
    </center>
</body>

</html>

Output:

How to Import Google Fonts in HTML?

N

Nilarjun

Improve

Article Tags :

Similar Reads

How to Get Custom Fonts in HTML?

Using custom fonts in HTML can make your web pages look more unique and visually appealing. It helps improve the overall design and user experience by adding a personal touch to your site. These are the following approaches to get the custom Fonts in HTML:Table of ContentUsing Google FontsUsing @fon

How To Change Font in HTML?

Changing fonts in HTML can enhance the visual appeal and readability of your website by up to 80%, according to design studies. Well-chosen fonts help set the tone of your content and improve user engagement. In this article, weâ€™ll explore different methods to adjust font style, size, and type using

How to Use Font Awesome Icons In HTML?

Icons play an important role in our modern applications. If we use good icons in our website then it can attract the user's attention and also help the user to identify which purpose it is used for.PrerequisitesHTMLCSSFont Awesome iconsApproach To Use Font Awesome Icons First, you need to add the Fo

How to Add Icons in HTML?

Icons in HTML are small images that show actions or items on a website, like a "home" button or a "search" symbol. They help people find things easily. To add icons in HTML, you can use an icon library like Font Awesome, Bootstrap Icons, Google Icons, and Image Icons. Icons1. Using Font Awesome Icon

How to add emoji in HTML document ?

Emojis are the characters from the Unicode character set that look like images or icons ????????????â€â™‚ï¸. They can be sized, copied, or pasted like any other character in HTML. UTF-8 is the default charset that is used in HTML documents because it contains almost all of the characters and symbols. Em