Google Fonts is a free web font service which hosts a huge variety of fonts to choose from. There are over 850 fonts to choose for use to webpages. Their number and quality is still increasing.


Link: Google Fonts

How to import and use Google Fonts

There are two ways to import Google Fonts into an HTML page

  • Using href link
  • Using @import rule

Example import Google Fonts using href link

<html>
  <head>
    <title>IT present</title>
   <link href="https://fonts.googleapis.com/css?family=Diplomata" rel="stylesheet"/>
  <style>
      p {
      font-family: Diplomata;
      color: red;
    }
    </style>
  </head>

  <body>
    <p>Diplomata Google Font</p>
  </body>
</html>

result:

Diplomata Google Font

JSFiddle

Example import Google Font using @import rule

<html>
  <head>
   <title>IT present</title>
   <style>
   @import url( https://fonts.googleapis.com/css?family=Kumar+One);
   p {
   font-family: 'Kumar One';
   color: blue;
   }
   </style>
  </head>

  <body>
     <p>Kumar One Google Font</p>
  </body>
</html>


result:

Kumar One Google Font

JSFiddle






Privacy Policy