CSS Fonts – A Guide

CSS fonts allow you to control the appearance, size, and style of text on a webpage. Choosing the right fonts improves readability, accessibility, and aesthetics. CSS provides properties to customize fonts, including font-family, font-size, font-weight, font-style, and more.

What You Will Learn

1. Understanding CSS Fonts
2. Using the font-family Property
3. Using Web Safe Fonts
4. Adding Custom Fonts with Google Fonts
5. Using @font-face for Custom Fonts
6. Setting Font Size (font-size)
7. Using em, rem, px, and % for Font Size
8. Adjusting Font Weight (font-weight)
9. Applying Italic and Oblique Styles (font-style)
10. Using the font-variant Property
11. Shorthand Font Property (font)
12. Best Practices and Common Mistakes

1. Understanding CSS Fonts

Text on a webpage is displayed using fonts, which are controlled with CSS font properties.

Basic Font Properties in CSS

Property	Description
font-family	Specifies the font type
font-size	Controls the text size
font-weight	Sets boldness
font-style	Defines italics or normal style
font-variant	Changes text to small caps
line-height	Adjusts spacing between lines

2. Using the font-family Property

The font-family property defines the font type to be used. It should always include fallback fonts in case the primary font is unavailable.

Example: Setting Font Family

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

Example: Using Multiple Fonts with Fallbacks

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

• The browser tries “Times New Roman” first.
• If unavailable, it uses Georgia.
• If neither is available, it defaults to a serif font.

3. Using Web Safe Fonts

Web-safe fonts are pre-installed on most devices.

List of Web Safe Fonts

Font	Generic Type
Arial	sans-serif
Verdana	sans-serif
Helvetica	sans-serif
Times New Roman	serif
Georgia	serif
Courier New	monospace
Lucida Console	monospace

Example: Using a Web Safe Font

body {
    font-family: "Verdana", sans-serif;
}

4. Adding Custom Fonts with Google Fonts

Google Fonts provides a collection of free fonts that can be added to your website.

Steps to Add Google Fonts

1. Visit Google Fonts
2. Choose a font (e.g., “Roboto”)
3. Copy the <link> tag from Google Fonts:

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

4. Apply the font in CSS:

body {
    font-family: "Roboto", sans-serif;
}

5. Using @font-face for Custom Fonts

You can upload your own fonts and use them with @font-face.

Example: Using Custom Fonts

@font-face {
    font-family: "MyCustomFont";
    src: url("myfont.woff2") format("woff2"),
         url("myfont.woff") format("woff");
}

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

• .woff2 and .woff are recommended for better browser support.

6. Setting Font Size (font-size)

The font-size property controls the text size.

Example: Different Font Sizes

h1 {
    font-size: 32px;
}

p {
    font-size: 18px;
}

7. Using em, rem, px, and % for Font Size

CSS allows different units for font sizing.

Unit	Description
px	Fixed size (e.g., 16px)
em	Relative to the parent element
rem	Relative to the root element (html)
%	Percentage of the parent font size

Example: Using Different Units

p {
    font-size: 16px;
}

h1 {
    font-size: 2em; /* Twice the size of parent text */
}

h2 {
    font-size: 1.5rem; /* 1.5 times the root font size */
}

8. Adjusting Font Weight (font-weight)

The font-weight property controls the boldness of text.

Example: Different Font Weights

p {
    font-weight: normal;
}

strong {
    font-weight: bold;
}

h1 {
    font-weight: 700;
}

Value	Description
normal	Default font weight
bold	Makes text bold
lighter	Lighter than normal
bolder	Bolder than normal
100 – 900	Thin to extra bold

9. Applying Italic and Oblique Styles (font-style)

The font-style property controls italics.

Example: Using Italics

p {
    font-style: italic;
}

Value	Description
normal	Default text style
italic	Italicized text
oblique	Similar to italic but slightly slanted

10. Using the font-variant Property

The font-variant property is used to enable small-caps styling.

Example: Small Caps

p {
    font-variant: small-caps;
}

11. Shorthand Font Property (font)

Instead of setting multiple font properties separately, use font shorthand.

Example: Using the font Shorthand

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

Shorthand Order:

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

12. Best Practices and Common Mistakes

Best Practices

Always include a fallback font in font-family.
Use relative units (em, rem) for responsive design.
Use Google Fonts or @font-face for unique typography.
Ensure proper contrast for readability.
Use font-weight: 400, 700 instead of bold for better control.

Common Mistakes and How to Fix Them

Mistake	Solution
Using only one font in font-family	Add fallback fonts.
Setting font size in px without responsiveness	Use rem or %.
Forgetting to load Google Fonts properly	Always include the <link> in <head>.
Overusing too many font styles on one page	Keep fonts consistent for better readability.

Conclusion

• Use font-family with fallback fonts.
• Use Google Fonts or @font-face for custom typography.
• Use relative units (em, rem) for responsive text.
• Apply font-weight and font-style for emphasis.
• Use font shorthand for clean, organized styles.