CSS Google Fonts

Google Fonts is a library of free, open-source fonts that can be used on websites or other digital platforms. The fonts are hosted by Google and can be easily integrated into web pages using a simple code snippet.

The library includes a wide variety of font styles and types, making it easy to find the perfect font for any project. Additionally, Google Fonts allows users to preview and test different font options before making a selection.

How To Use Google Fonts

There are a few different ways to use Google Fonts on your website or other digital platform.

Here are the basic steps for using Google Fonts:

  1. Go to the Google Fonts website https://fonts.google.com/ and browse through the library of available fonts.
  2. When you find a font you like, click the "+" button next to it to add it to your "Selected Families" list.
  3. Once you have selected the fonts you want to use, click the "Embed" button at the bottom of the "Selected Families" list.
  4. On the "Embed" tab, you will see a code snippet that you can use to integrate the fonts into your website. The code should include a link to the font files, which are hosted by Google.
  5. Copy the code snippet and paste it into the head of your HTML file.
  6. Now you can apply the font to specific elements on your website by setting the font-family property in CSS.
  7. Alternatively, you can also download the font and host it on your server and add the local path of the font in the font-family property.
  8. Test your website and make sure the font is being applied correctly.

Note: You can also use Google Fonts with CSS @import statement or javascript.

How to add a Google Font to your HTML code

To add a Google Font in HTML, you'll need to add a link to the font in the head of your HTML file, and then apply the font to specific elements using CSS.

Here is an example of how to add a Google Font to your HTML code:

<!DOCTYPE html>
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
    }
  </style>
</head>

<body>
  <h1>This is an example of using a Google Font</h1>
  <p>The font used in this example is 'Open Sans'</p>
</body>

</html>

In this example, the link to the Open Sans font is added in the head of the HTML file, and the font-family property is set to Open Sans in the body section of the CSS. This means that all text within the body of the HTML document will use the Open Sans font.

Using Multiple Google Fonts

You can also add multiple fonts from google fonts library and set a fallback font for each of them in case the font is not loaded for some reason.

<link href="https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];600&family=Roboto&display=swap" rel="stylesheet">

In the above example two fonts are added Open Sans and Roboto, and Open Sans is used as fallback if Roboto is not loaded.

Also, note that you can use different ways to include the google font link like using javascript, CSS @import and others.

How to style Google Fonts with CSS

Once you've added a link to a Google Font in the head of your HTML file, you can use CSS to style the text on your website. Here's an example of how to apply a Google Font to specific elements on your website:

<!DOCTYPE html>
<html>

<head>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
  <style>
    /* apply the font to all h1 elements */
    h1 {
      font-family: 'Open Sans', sans-serif;
    }
    /* apply the font to all p elements */
    p {
      font-family: 'Open Sans', sans-serif;
    }
    /* apply different styles to h1 elements with class "custom-title" */
    .custom-title {
      font-size: 32px;
      font-weight: bold;
      text-transform: uppercase;
    }
    /* apply different styles to p elements with class "custom-paragraph" */
    .custom-paragraph {
      font-size: 18px;
      font-style: italic;
    }
  </style>
</head>

<body>
  <h1 class="custom-title">This is an example of using a Google Font</h1>
  <p class="custom-paragraph">The font used in this example is 'Open Sans'</p>
</body>

</html>

In this example, the CSS sets the font-family property for all <h1> and <p> elements to Open Sans, and also applies different styles to <h1> elements with class custom-title and <p> elements with class custom-paragraph.

You can use CSS to style the text in many ways, such as changing the font size, weight, style, color, spacing, alignment, and more. You can also apply multiple classes to elements and change the style accordingly.

You can also use CSS properties such as font-variant, letter-spacing, text-decoration, text-shadow and many more to enhance the look of the text.

CSS Basics