How to Change the Font Family & Size of Text in CSS ?

Last Updated : 20 Mar, 2024

In CSS, the font family and size of the text can be customized to enhance the visual appearance of the text within the application. We can use various inbuilt properties offered by CSS to change font family and size.

Below are the approaches to change the font family and size of text in CSS:

Table of Content

Using font-family and font-size
Using shorthand font property

Using font-family and font-size

In this approach, we are using the CSS properties font-family and font-size to customize the typography of different HTML elements. The <style> section defines specific font families and sizes for the overall document, h1, h3, <p>, and <div> elements.

Syntax:

element_selector {
    font-family: family-name | generic-family | initial | inherit;
    font-size: size;
}

Example: The below example uses font-family and font-size to the font family and size of text in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 1</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
            background-color: #f8f8f8;
            color: #333;
        }

        h1 {
            color: #4CAF50;
            font-family: "Segoe UI", Tahoma, 
                        Geneva, Verdana, sans-serif;
            font-size: 24px;
        }

        h3 {
            margin-bottom: 20px;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }

        p {
            font-family: 'Courier New', Courier, 
                        monospace;
            font-size: 18px;
            margin: 10px 0;
        }

        div {
            font-family: 'Lucida Console', Monaco, 
                        monospace;
            font-size: 20px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <h1>
          GeeksforGeeks 
          (Font: Segoe UI, Size: 24px)
      </h1>
    <h3>
          Using font-family and font-size 
          (Font: Arial, Size: 16px)
      </h3>
    <p>
          This is a paragraph 
          (Font: Courier New, Size: 18px)
      </p>
    <div>
          This is a div element 
          (Font: Lucida Console, Size: 20px)
      </div>
</body>

</html>

Output:

Screenshot-2024-03-07-at-14-46-13-Example-1

Using shorthand font property

In this approach, we are using the shorthand font property in CSS to set both the font family and size for different HTML elements. Each text element, including <h1>, <h3>, <p>, and <div>, is styled with a unique combination of font family and size.

Syntax:

.element 
{
  font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

Example: The below example uses shorthand font property to the font family and size of text in CSS.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Example 2</title>
    <style>
        body {
            font-family: 'Times New Roman', 
                        serif;
            text-align: center;
            margin: 50px;
            background-color: #f8f8f8;
            color: #333;
        }
        h1 {
            color: #4CAF50;
            font: 36px 'Georgia', serif;
        }
        h3 {
            margin-bottom: 20px;
            font: 24px 'Courier New', Courier, 
                    monospace;
        }
        p {
            font: 20px 'Verdana', Geneva, 
                    sans-serif;
            margin: 10px 0;
        }
        div {
            font: 18px 'Impact', Charcoal, 
                    sans-serif;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <h1>
          GeeksforGeeks 
          (Font: Georgia, Size: 36px)
      </h1>
    <h3>
          Using shorthand font property 
          (Font: Courier New, Size: 24px)
      </h3>
    <p>
          This is a paragraph 
          (Font: Verdana, Size: 20px)
      </p>
    <div>
          This is a div element 
          (Font: Impact, Size: 18px)
      </div>
</body>

</html>