Comprehensive Guide to Using Fonts in HTML

This guide provides an overview of how to effectively use fonts in HTML, focusing on various font-related elements and attributes.

Key Concepts

• Font Elements: HTML offers several elements to control how text appears on a webpage.
• Text Styling: You can change the style, size, and weight of text using CSS.

Main Font Elements

1. <font> Element (Deprecated)

• Used to define the font size, color, and face.

Example:

<font color="red" size="5" face="Arial">This is a sample text.</font>

2. CSS for Fonts

• The modern way to style fonts is through CSS (Cascading Style Sheets).
• You can define fonts using the font-family, font-size, and font-weight properties.

Example:

<p style="font-family: Arial; font-size: 20px; font-weight: bold;">
    This is a bold Arial text.
</p>

Font Properties

1. font-family

• Specifies the font type.

Example:

p {
    font-family: 'Times New Roman', serif;
}

2. font-size

• Sets the size of the font.

Example:

h1 {
    font-size: 24px;
}

3. font-weight

• Defines the thickness of the font.

Example:

strong {
    font-weight: bold;
}

4. font-style

• Controls the style of the font (normal, italic, oblique).

Example:

em {
    font-style: italic;
}

Conclusion

Using fonts in HTML is essential for enhancing the readability and aesthetics of a webpage. While the <font> element was commonly used in the past, CSS is now the preferred method for styling text, providing greater flexibility and control over font appearance. Remember to utilize various CSS properties to achieve your desired text style.