CSS Fonts

CSS Fonts are essential in web design, defining how text appears on a webpage. CSS provides various properties to control the font style, weight, size, spacing, and more.

Table of Contents

1. CSS Fonts Family

The font-family property defines which typeface will be used for an element. It allows multiple fonts as fallbacks.

Syntax:

font-family: "Primary Font", "Secondary Font", generic-family;

CSS

If the first font is not available, the browser tries the next one.
The generic family is a must as a final fallback.

Example

p {
    font-family: "Arial", "Helvetica", sans-serif;
}

CSS

Generic Font Families:

Generic Family	Description
`serif`	Fonts with small strokes at the ends (e.g., Times New Roman).
`sans-serif`	Fonts without strokes (e.g., Arial, Helvetica).
`monospace`	Fixed-width characters (e.g., Courier New).
`cursive`	Handwritten-style fonts (e.g., Brush Script MT).
`fantasy`	Decorative or stylized fonts.

2. Font Size

Defines the size of the text.

Units Used:

Unit	Description
`px`	Absolute pixel size (e.g., `16px`).
`em`	Relative to parent font-size (e.g., `1.2em`).
`rem`	Relative to the root element (`html`).
`%`	Relative to the parent element.
`vw`	Viewport width percentage.
`vh`	Viewport height percentage.

Examples:

p {
    font-size: 16px;   /* Fixed size */
    font-size: 1.2em;  /* 1.2 times the parent */
    font-size: 120%;   /* 120% of the parent */
    font-size: 5vw;    /* 5% of the viewport width */
}

CSS

3. Font Weight

Controls the thickness of the font.

Values:

Value	Description
`normal`	Default (400).
`bold`	Bold (700).
`lighter`	Lighter than normal.
`bolder`	Bolder than normal.
`100-900`	Numeric weights (100 = thin, 900 = extra bold).

Example:

h1 {
    font-weight: 900; /* Extra bold */
}

CSS

4. Font Style

Defines whether the text is normal, italic, or oblique.

Values:

normal → Default text.
italic → Italicized text.
oblique → Slightly slanted text.

Example:

p {
    font-style: italic;
}

CSS

5. Font Variant

Controls special text effects like small caps.

Values:

normal → Default.
small-caps → Converts lowercase letters into uppercase but in a smaller size.

Example:

p {
    font-variant: small-caps;
}

CSS

6. Line Height

Controls the space between lines of text.

Values:

Value	Description
`normal`	Default (1.2 times the font size).
`number`	Multiplier of the font size (e.g., `1.5`).
`px, em, %`	Fixed or relative units.

Example:

p {
    line-height: 1.5;  /* 1.5 times the font size */
    line-height: 20px; /* Fixed spacing */
}

CSS

7. Letter Spacing & Word Spacing

These properties control the space between letters and words.

Examples:

p {
    letter-spacing: 2px;  /* Increases space between letters */
    word-spacing: 5px;    /* Increases space between words */
}

CSS

8. Text Transform

Changes the case of text.

Values:

uppercase → Converts all letters to uppercase.
lowercase → Converts all letters to lowercase.
capitalize → Capitalizes the first letter of each word.

Example:

p {
    text-transform: uppercase;
}

CSS

9. Web Fonts (Custom Fonts)

You can use custom fonts by:

Google Fonts
@font-face (Self-hosted fonts)

a. Using Google Fonts:

Google Fonts provides free fonts that can be included in your website.

Steps:

Go to Google Fonts.
Select a font.
Copy the provided <link> or @import URL.
Use it in your CSS.

Example

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

CSS

b. Using @font-face (Self-Hosted)

If you have a custom font file, you can include it using @font-face.

Steps:

Place the .woff, .woff2, or .ttf file in your project folder.
Use @font-face to define the font.

Example:

@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'MyCustomFont', sans-serif;
}

CSS

10. Font Shorthand Property

The font property is a shorthand for multiple font properties.

Syntax:

font: font-style font-variant font-weight font-size/line-height font-family;

CSS

Example:

p {
    font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

CSS

11. Best Practices for Using Fonts

Always include fallback fonts.
Use web-safe fonts to ensure compatibility.
Keep font files optimized for performance.
Use relative units (em, rem) for better scalability.

12. Example: Complete Font Styling

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Styling Example</title>
    <link rel="stylesheet" href="styles.css">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
</head>
<body>

    <header>
        <h1>Welcome to Font Styling</h1>
    </header>

    <section>
        <p class="regular-text">This is a regular paragraph with default styling.</p>
        <p class="bold-text">This text is bold and larger.</p>
        <p class="italic-text">This text is italicized.</p>
        <p class="small-caps-text">This text uses small caps.</p>
        <p class="uppercase-text">This text is transformed to uppercase.</p>
    </section>

</body>
</html>

CSS

CSS Code (styles.css)

/* Custom Font Import */
@font-face {
    font-family: 'MyCustomFont';
    src: url('fonts/MyCustomFont.woff2') format('woff2'),
         url('fonts/MyCustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Global Styles */
body {
    font-family: 'Poppins', sans-serif; /* Google Font */
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.5px;
    word-spacing: 2px;
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}

/* Header Styling */
h1 {
    font-family: 'MyCustomFont', sans-serif; /* Custom Font */
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    color: #007bff;
}

/* Regular Text */
.regular-text {
    font-style: normal;
    font-weight: normal;
}

/* Bold Text */
.bold-text {
    font-weight: 700;
    font-size: 22px;
    color: #ff5733;
}

/* Italic Text */
.italic-text {
    font-style: italic;
    font-size: 20px;
    color: #27ae60;
}

/* Small Caps Text */
.small-caps-text {
    font-variant: small-caps;
    font-size: 20px;
    color: #8e44ad;
}

/* Uppercase Text */
.uppercase-text {
    text-transform: uppercase;
    font-size: 20px;
    color: #e67e22;
}

CSS

output:

Explanation:

1. Using Google Fonts → Poppins is imported from Google Fonts and used in the <body>.

2. Using Custom Fonts (@font-face) → MyCustomFont is self-hosted and applied to the <h1>.

3. Different Font Properties Used:

font-size → Adjusts text size.
font-weight → Controls boldness.
font-style → Adds italic styling.
font-variant: small-caps → Converts lowercase to uppercase in small form.
text-transform: uppercase → Converts text to uppercase.
letter-spacing & word-spacing → Adds spacing between letters and words.
color → Changes text color.

4. Global Styling:

line-height: 1.6 → Improves readability.
text-align: center → Centers text.
background-color: #f4f4f4; → Adds a light background.
color: #333; → Sets a default text color.