How to use Google Fonts In CSS

To use Google Fonts, Include an @import url statement in order to use the Google Font, depending on the type of font. Use the element selector to select the body from the HTML page. The built-in CSS property font family can be utilized to apply a font family to the whole document.

Example: Illustration of changing the font style the font-family set to Raleway from Google Fonts.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <style>
  
        /* Import font family to use from Google Fonts */
        @import url(
'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
  
        body {
            font-family: "Raleway", sans-serif;
        }
    </style>
    <title>Font Family</title>
</head>
  
<body>
    <h1 style="color:green;">
        w3wiki
    </h1>
    <p>
          A computer science
           portal for geeks.
    </p>
</body>
  
</html>


Output:

How to change the Font Style in CSS ?

Font style in CSS is used to make the text of web pages more presentable. The font style property is responsible for determining how the text within an element is displayed in terms of its style. It defines whether the text should be displayed in a normal, italic, or oblique style.

Similar Reads

Syntax

element { font-family: family-name | generic-family; font-style: normal | italic | oblique; font-variant: normal | small-caps;}font: font-style font-variant font-weight font-size/line-height font-family;...

Using the font-family property

This approach utilizes the font-family property to change the font style. Use the element selector to select the body from the HTML page. The built-in CSS property font family can be utilized to apply a font family to the whole document....

Using Google Fonts

...

Using the font-style property

To use Google Fonts, Include an @import url statement in order to use the Google Font, depending on the type of font. Use the element selector to select the body from the HTML page. The built-in CSS property font family can be utilized to apply a font family to the whole document....

Using the font-size property

...

Using the font-variant property

To change the style of the font, The built-in CSS property font family can be used to apply a font family on the HTML page, and the font style can be utilized to apply a font style to the whole document. This value can differ from normal, oblique, to italic etc....

Using the font short-hand property

...

Contact Us