OneBite.Dev - Coding blog in a bite size

import google fonts into css

Code snippet for how to import google fonts into css with sample and detail explanation

When designing a website, you might want to use a unique, attractive font that will make your site stand out. Google Fonts is a free library of 800 fonts that you can use on your website. This article will guide you on how to import Google Fonts into CSS.

Code snippet for Importing Google Fonts

The first step is to identify the font you want from the Google Fonts library. Once you’ve chosen, Google provides a URL for this font. You should then include this URL in your project by inserting the URL in the head of your HTML file. An example of this application is as follows:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <div>My first Google Font</div>
  </body>
</html>

Code Explanation for Importing Google Fonts

The link element in the head part of your HTML file is where you will insert the provided URL from Google. In this case, we have imported a font named ‘Tangerine’.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

The next step involves applying the font to a CSS selector. In our case, we have chosen to apply our Google Font, ‘Tangerine’, to the body tag.

style {
    body
    {
        font-family: 'Tangerine', serif;
        font-size: 48px;
    }
}

The above CSS code sets the font family of all text within the body to ‘Tangerine’ with a size of 48 pixels. If ‘Tangerine’ fails to load for any reason or it is not available, the text will display in the secondary font, ‘serif’, which is built-in by most browsers.

That’s it! You have successfully imported and used a Google Font. Google Fonts is a great tool to enhance your website designs and allows to innovate beyond traditional fonts. Remember to always prioritize readability and accessibility when choosing a font for your website.

css