How To Change Font in HTML?

Last Updated : 25 Jun, 2025

Changing fonts in HTML can enhance the visual appeal and readability of your website by up to 80%, according to design studies. Well-chosen fonts help set the tone of your content and improve user engagement. In this article, we’ll explore different methods to adjust font style, size, and type using HTML and CSS.

How to Change Font Using CSS

1. Changing Font Using Inline CSS

Inline CSS is applied directly to individual HTML elements using the style attribute. This method is quick but not recommended for large projects because it can make your code messy and harder to manage.

Syntax

<element style="property: value;">Content</element>

element: The HTML tag where the style can be applied (like <p>, <h2>, etc).
style: The attribute that specifies the style rule.
property: value: The CSS rule. In this case, the property is font-family (to change the font) and the value is the font name.

Example: In this example, the <p> element has the inline style where the font family is set to Arial. The text "This is a paragraph with the Arial font." will be displayed using the Arial font.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: green; font-family: 'Arial'; font-size: 16px;">
        GeeksforGeeks
    </h1>
    <p style="font-family: 'Arial'; font-size: 16px; color: blue;">
        This is a paragraph with Arial font, 
        blue color, and 16px font size.
    </p>
</body>
</html>

Output: The text can be displayed in the Arial font with the font size of the 16px and blue color.

Using-the-Inline-CSS — Using the Inline CSS

2. Changing Font Using Internal CSS

Internal CSS is written inside the <style> tag within the <head> section of your HTML file. This method is useful when you want to apply styles to the whole page without using an external stylesheet.

Syntax

<head>
    <style>
        selector {
            property: value;
    }
    </style>
</head>

Example: In this example, we can use the <style> tag inside the <head> section to apply the styles to the <p> element. The font-family can be set to the "Times New Roman" and the font-size is set to the 18px for all the <p> elements in the document.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Internal CSS Example</title>
    <style>
        p {
            font-family: 'Times New Roman';
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <h1 style="color: green; font-family: 'Arial'; 
               font-size: 16px;">GeeksforGeeks</h1>
    <p>This is a paragraph with Times New Roman font,
       green color, and 18px font size.
   </p>
</body>
</html>

Output: The text will be displayed in the Times New Roman font with the font size of the 18px and green color.

Using-the-Internal-CSS — Using the Internal CSS

3. Changing Font Using External CSS

External CSS is the most efficient way to style your HTML document. You create a separate .css file that contains all your styling rules, and then link that file to your HTML document. This approach allows you to reuse the same styles across multiple pages.

Syntax

In index.html:

<head>
     <link rel="stylesheet" href="styles.css">
</head>

In style.css:

selector {
    property: value;
}

Example: In this example, the HTML file links to the external CSS file named as the style.css using the <link> tag. In the style.css file, the font-family for the <h1> element is set to the "Georgia" and the color is set to the purple.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>External CSS Example</title>
    <link rel="stylesheet"
          href="styles.css">
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h1>This heading uses Georgia font with external CSS</h1>
</body>
</html>

style.css

h1 {
    font-family: 'Georgia';
    color: purple;
  }

Output: The heading will be displayed in the Georgia font, with the font size and the purple color.

How to Change Font Using Google Fonts

Google Fonts is the free library of the web fonts provided by the Google. We can easily integrate these fonts into the website by including the link to the desired font in the HTML, and then applying it using CSS.

Syntax

In index.html

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Font+Name&display=swap" rel="stylesheet">
</head>

In style.css

selector {
    font-family: 'Font Name', sans-serif;
}

Example: In this example, the HTML file links to the Google Fonts using the <link> tag. The font-family for the <p> element can be set to the "Roboto" and the font from Google Fonts, with the fallback to the sans-serif if Roboto is unavailable.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Google Fonts Example</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style>
        p {
            font-family: 'Roboto', sans-serif;
            color: darkred;
        }
    </style>
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <p>This paragraph uses Roboto font from Google Fonts and dark red color.</p>
</body>
</html>

Output: The paragraph text can be displayed in the Roboto font and dark red color.

How to Change Font Using @font-face Rule

The @font-face can allows you to include the custom fonts in the CSS by specifying the URL to the font file. This method can gives you the flexibility to use the any font you want, as long as you have the font file.

Syntax

@font-face {
     font-family: 'CustomFont';
     src: url('fonts/customfont.woff2') format('woff2');
}

selector {
    font-family: 'CustomFont';
}

Example: In this example, the @font-face rule can be used to define the custom font called "MyCustomFont", which is located in the fonts/folder. The font-family for the div element is set to the MyCustomFont.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>@font-face Example</title>
    <style>
        @font-face {
            font-family: 'MyCustomFont';
            src: url('fonts/MyCustomFont.woff2') format('woff2');
        }
        div {
            font-family: 'MyCustomFont';
            font-size: 20px;
            color: navy;
        }
    </style>
</head>
<body>
    <h1 style="color: green;">GeeksforGeeks</h1>
    <div>This text uses a custom font loaded with
         @font-face, with blue color and 20px font size.
   </div>
</body>
</html>

Output: The text inside the div can be displayed using the custom font defined with the @font-face, navy color and the 20px font size.

How to Change Font Using the HTML <font> Tag

The <font> tag is an old and deprecated method of changing fonts. It’s no longer recommended because it mixes content with style, which makes your code harder to maintain. However, it’s still worth knowing for historical reasons.

Syntax

<font face="Courier" size="Number" color="ColorName">Content</font>

Example: In this example, the <font> tag changes the font to Courier, the size to 4, and the color to blue. Despite being simple, this method is outdated and lacks flexibility, which is why CSS is now the preferred way to change fonts.