Skip to content
Related Articles

Related Articles

How to import Google Fonts in HTML ?
  • Last Updated : 14 May, 2019

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 in your webpage. Google Fonts is a free web font service which 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>
  
<head>
    <link href=
          rel='stylesheet' />
    <style>
        h1 {
            font-family: Sofia;
            color: green;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
    </center>
</body>
  
</html>

Output:

Example:




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

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :