HTML Fonts

HTML fonts control the appearance of text, such as size, type, and style.

Font Tag (Deprecated)

<!-- NOT RECOMMENDED -->
<font size="5" color="red" face="Arial">Text</font>

CSS Font Properties

font-family

body {
    font-family: Arial, sans-serif;
}

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

.code {
    font-family: 'Courier New', monospace;
}

font-size

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5rem;
}

.small {
    font-size: 0.875rem;
}

font-weight

.bold {
    font-weight: bold;
}

.light {
    font-weight: 300;
}

.normal {
    font-weight: normal;
}

font-style

.italic {
    font-style: italic;
}

.oblique {
    font-style: oblique;
}

Google Fonts

<head>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>

<style>
    body {
        font-family: 'Roboto', sans-serif;
    }
</style>

Case Study: Campus Website Typography

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Campus Typography</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --font-primary: 'Inter', sans-serif;
        }

        body {
            font-family: var(--font-primary);
            line-height: 1.6;
            color: #1f2937;
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1.2;
        }

        h2 {
            font-size: 2rem;
            font-weight: 600;
            line-height: 1.3;
        }

        h3 {
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 1.4;
        }

        p {
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.6;
        }

        .small {
            font-size: 0.875rem;
            font-weight: 300;
        }
    </style>
</head>
<body>
    <h1>Main Title</h1>
    <h2>Subtitle</h2>
    <h3>Sub-subtitle</h3>

    <p>This is a paragraph with normal size.</p>
    <p class="small">This is a paragraph with small size.</p>
</body>
</html>

Everyday Case Study

Case: A developer needs to choose fonts for an application.

<style>
    /* Font Stack */
    :root {
        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
        --font-mono: 'Fira Code', 'Courier New', Courier, monospace;
    }

    body {
        font-family: var(--font-sans);
    }

    .article {
        font-family: var(--font-serif);
    }

    code {
        font-family: var(--font-mono);
    }
</style>

Font Stack

/* Sans-serif */
font-family: Arial, Helvetica, sans-serif;

/* Serif */
font-family: Georgia, 'Times New Roman', Times, serif;

/* Monospace */
font-family: 'Courier New', Courier, monospace;

/* System fonts */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Best Practices

1. Use Google Fonts: For high-quality fonts
2. Font stack: Always provide a fallback
3. Font loading: Use font-display: swap
4. Performance: Don't load too many fonts
5. Accessibility: Make sure sizes are large enough

Summary

HTML fonts affect content readability. Use Google Fonts and font stacks for a consistent look.