How To Add Google Fonts To CSS Code | CSS Import Google Font 2024

Google font is one of the best resources where you can find a lot of beautiful fonts family, in this mini-tutorial, I’ll show you How to add google fonts to CSS code, therefore you can use your favorite font family on your website pages.

you can add google font to HTML file with two methods:

1. Import Google Fonts using the <link> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>import google font</title>
    <link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
    <style>
      h2 {
        font-family: 'Dosis', sans-serif;
        color: #784777;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>your title here</h2>
  </body>
</html>

2. add google fonts to CSS using the @import rule:

the second way to import google font is to copy the @import script from the google font website and past it within your CSS style.

<!DOCTYPE html>
<html>
  <head>
    <title>import google fonts</title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');
      h2 {
        font-family: 'Lora', serif;
        color: #008900;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Title here</h2>
  </body>
</html>