How to use Google Fonts on your web page?


The Google Font is a free font service for computer and web. It launched in the year 2010 and owned by Google. In 2021, open-source icon support was added. It includes 1,576 font families that includes 352 variable font families. The official website of Google Font is fonts.google.com. Just like the Font Awesome icons, the Google Fonts are added to a website using the <link> element. Let us see how to add and use Google Font on a web page.

Features

  • Easily insert Google Fonts on your web page

  • It is having more than 1k font families

  • While selecting the font, check the specimen.

  • The Type tester is also provided

  • Directly download any font family

Set the link for the fonts

To add the fonts on our web page, we have used the Google Fonts. Include it on a web page using the <link> element −

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>

Include the Google Font on your web page

To insert the Google Font on your page, use the font-family property and set it under the <body> element −

<style>
   body {
      font-family: "Permanent Marker", cursive;
      font-size: 22px;
   }
</style>

Example

To use Google Fonts on your webpage, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
   <style>
      body {
         font-family: "Permanent Marker", cursive;
         font-size: 22px;
      }
   </style>
</head>
<body>
   <h1>Google fonts example</h1>
   <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores.
   </p>
   <h2>1 2 3 4 5 6 7 8 9 10</h2>
</body>
</html>

Updated on: 21-Dec-2023

241 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements