Horje
How to change the Font Style in CSS ?

Font style in CSS is important for making web page text more presentable. The font-style property determines how the text within an element is displayed, defining whether the text should be normal, italic, or oblique.

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;

Table of Content

Using the font-family property

The font-family property changes the font style by selecting the body element from the HTML page. This built-in CSS property can apply a specific font family to the entire document.

Example: Illustration of changing the font style of the font family set to Arial, which is part of the Helvetica family.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
  
    <title>Font Family</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    
      <p>
          A computer science 
           portal for geeks.
    </p>
</body>

</html>

Output

Screenshot-2024-01-29-183630

Using Google Fonts

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;">
        GeeksforGeeks
    </h1>
    <p>
          A computer science
           portal for geeks.
    </p>
</body>

</html>

Output:

Screenshot-2024-01-29-184010

Using the font-style 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.

Example: Illustration of changing the font style, the font-family is set to Times New Roman.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: "Times New Roman",
                          Times, serif;
            font-style: italic;
        }
    </style>
    <title>Font Family</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <p>
       A computer science
       portal for geeks.
    </p>
</body>

</html>

Output:

Screenshot-2024-01-29-184917

Using the font-size property

The built-in CSS property font family can be used to apply a font family on the HTML page, and the font size can be utilized to apply a font size to the whole document. This value can be in either pixels, rems, ems, vh etc.

Example: Illustration of changing the font style, the font-size set to 2rem is used.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 2rem;
        }
    </style>
    <title>Font Family</title>
</head>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <p>
       A computer science 
       portal for geeks.
    </p>
</body>

</html>

Output:

Screenshot-2024-01-29-185449

Using the font-variant property

The built-in CSS property font family can be used to apply a font family on the HTML page, and the font variant can be utilized to apply a font variant to the whole document. This value can be in either normal, small-caps (all letters in capital but small size) etc.

Example: Illustration of changing the font style, the font-variant set to small-caps.

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;
            font-variant: small-caps;
        }
    </style>
    <title>Font Family</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <p>
       A computer science 
       portal for geeks.
    </p>
</body>

</html>

Output:

Screenshot-2024-01-29-185858

Using the font short-hand property

Use the element selector to select the body from the HTML page. The built-in CSS property font can be utilized to apply font style, font variety, font weight, font size, font family, etc. on the whole document.

Example: Illustration of changing the font style with the font family using short-hand property.

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: oblique bold 16px/1.5 
                  "Raleway", sans-serif;
        }
    </style>
    <title>Font Family</title>
</head>

<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <p>
       A computer science portal for geeks.
    </p>
</body>

</html>

Output:

g1

CSS font properties is used to enhance text presentation on web pages. By using font-family, font-style, font-size, font-variant, and the font shorthand property, developers can create visually appealing and readable content. Whether using standard fonts or incorporating Google Fonts, these techniques provide flexibility and creativity in web design.


 


Reffered: https://www.geeksforgeeks.org

CSS

Related
How does the CSS Box-sizing Property control the size of HTML Elements ? How does the CSS Box-sizing Property control the size of HTML Elements ?
How to Set Width and Height of Span Element using CSS ? How to Set Width and Height of Span Element using CSS ?
How to implement the backface-visibility Property in CSS ? How to implement the backface-visibility Property in CSS ?
How to center an element horizontally using the CSS Box Model ? How to center an element horizontally using the CSS Box Model ?
What is the default value for the box-sizing Property? What is the default value for the box-sizing Property?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje