How to add custom fonts to your websites using Google fonts?

Google fonts using CSS: In this tutorial, we will learn how to add custom fonts to your websites using Google fonts with the help CSS? By Apurva Mathur Last updated : July 25, 2023

Google fonts to make your websites awesome

Google provides us wide variety of typography libraries that we can embed in our web page to make it look creative. Goggle has fonts API which is imported into the code and our whole web page will be styled in that font.

Now the question is how to import these fonts into our code. Before this, it's important to know from where we'll get the links to these special fonts.
Let us first discuss how to get the links to Google fonts.

Steps to add custom fonts to your websites using Google fonts

The steps to add custom fonts to your websites using Google fonts are:

1. Visit Google fonts to open all available Google fonts

Go to https://fonts.google.com/

When you'll visit the above link, you'll see many fonts. Select any font you like.

2. Select a Google font

After selecting a font Click on "Select this style".

3. Go to the 'Selected family' widget/section

After selecting a particular style click on the top right widget.

You'll get the link to a particular font.

4. Copy and link CSS of selected Google font

Copy that link and CSS family.

5. Import the Google font's script link/code to your code

Whenever we want to import any link into our code, we do that in the head section of the code. To import Google font just copy the link (Font link) as it is into the head section and style the element with the CSS family written with the link.

Example to add custom fonts to your websites using Google fonts

In this example, we are using Google fonts in our code to use stylish fonts.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <!--CSS GOOGLE FONT LINK-->
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
   </head>
   <style>
      p{
      /*CSS family (It's important to mention the font family)*/
      font-family: 'Righteous', cursive;
      font-size: 100px;
      text-align: center;
      color: darkseagreen;
      }
   </style>
   <body>
      <p>Include Help</p>
      <p>Welcomes ALL</p>
   </body>
</html>

The output of the above example is:

CSS Examples »

How to create different dividers with CSS?

Does 'display:none' prevent an image from loading?