How to add google fonts to CSS code | CSS import google font

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:

55
<!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:

3333

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>

using google fonts in css video tutorial:

If you’re not satisfied with the HTML standard fonts, then you have a great source of Awesome fonts it’s the Google Fonts website.

add google fonts to CSS

the google fonts website fonts are free, and you can use up to 1200 types of fonts.