HTML Fonts

Introduction to HTML Fonts

Fonts determine how text looks on a webpage. They affect readability, style, and overall design.

In HTML, fonts can be applied to text using CSS (modern and recommended) or the old <font> tag (deprecated in HTML5).

Best Practice: Always use CSS to style fonts instead of the <font> tag.

Font Properties in HTML/CSS

The main font properties are:

font-family – Specifies the typeface
font-size – Specifies the size of text
font-weight – Specifies boldness
font-style – Italic or normal
text-decoration – Underline, line-through, etc.
color – Text color

1️⃣ font-family

Defines the font type for text.

<p style="font-family: Arial, sans-serif;">This text uses Arial</p>

Always include a fallback font (e.g., sans-serif) in case the first font is unavailable.
Common web-safe fonts:
Arial
Helvetica
Times New Roman
Georgia
Courier New
Verdana

2️⃣ font-size

Sets the size of text. Can use pixels, em, rem, percentages, or keywords like small, medium, large.

<p style="font-size: 20px;">This is 20px text</p>
<p style="font-size: 1.5em;">This is 1.5em text</p>
<p style="font-size: large;">This is large text</p>

💡 Tip: Use relative units (em, rem) for better responsiveness.

3️⃣ font-weight

Controls the boldness of text.

<p style="font-weight: normal;">Normal text</p>
<p style="font-weight: bold;">Bold text</p>
<p style="font-weight: 100;">Thin text</p>
<p style="font-weight: 900;">Extra bold text</p>

4️⃣ font-style

Controls whether text is italic or normal.

<p style="font-style: normal;">Normal text</p>
<p style="font-style: italic;">Italic text</p>
<p style="font-style: oblique;">Oblique text</p>

5️⃣ text-decoration

Adds styling like underline, line-through, or none.

<p style="text-decoration: underline;">Underlined text</p>
<p style="text-decoration: line-through;">Strikethrough text</p>
<p style="text-decoration: none;">No decoration</p>

6️⃣ font color

Text color is controlled by the color property:

<p style="color: blue;">Blue text</p>
<p style="color: #ff5733;">Custom hex color text</p>

Using Google Fonts (Recommended Modern Fonts)

Google Fonts provides free fonts for websites.

Include the font in <head>:

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

Apply it in CSS:

<p style="font-family: 'Roboto', sans-serif;">This text uses Roboto font</p>

This is how professional websites use modern fonts.

Deprecated `<font>` Tag

Old HTML used the <font> tag, but it should not be used in modern HTML5.

Example:

<font face="Arial" size="4" color="red">Old font tag</font>

✅ Modern approach: Use CSS instead.

Practice Code Example

Create a webpage demonstrating:

Different font families
Font size variations
Bold and italic text
Underline and strikethrough
Custom color
Using Google Fonts

Example Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Fonts Practice</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Lobster&display=swap" rel="stylesheet">
</head>
<body>

    <h1 style="font-family: 'Roboto', sans-serif; font-size: 36px; font-weight: bold; color: #2e86de;">
        Roboto Bold Heading
    </h1>

    <p style="font-family: 'Lobster', cursive; font-size: 24px; font-style: italic; color: #e74c3c;">
        Lobster Italic Paragraph
    </p>

    <p style="text-decoration: underline; font-weight: 500;">Underlined Medium Text</p>
    <p style="text-decoration: line-through; font-weight: 300;">Strikethrough Thin Text</p>

</body>
</html>

HTML