Open In App

How To Change Font in HTML?

Last Updated : 17 Oct, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

Changing fonts in HTML can significantly improve the readability and appearance of your website. There are several methods for adjusting the style, size, or type of font. Let's see each approach in detail.

Table of Content

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.

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.

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 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.

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>
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.

Using-the-External-CSS
Using the External CSS

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 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 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.

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.

google-fonts-example
Using the Google Fonts

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.

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 navy 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.

font-face-rule-example
Using the @font-face Rule

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.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Change Font Example</title>
</head>

<body>
    <font face="Courier" size="4" color="blue">This text uses the Courier font.</font>
</body>

</html>

Output:

font-change-using-font-tag
Using the HTML <font> Tag

Next Article
How to Change Font Size in HTML ?

M
maheshdaxt
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox