CSS Font

The font property in CSS is used to define the appearance of text content. It controls aspects like font family, size, weight, style, and more. Here’s a detailed guide for beginners to understand and use the font property effectively.

1. Font Family

The font-family property specifies the typeface of the text. You can list multiple fonts as a “fallback” system. If the browser doesn’t support the first font, it tries the next one.

Syntax:

font-family: "Helvetica", "Arial", sans-serif;

Try It Now

Example:

<p style="font-family: 'Courier New', Courier, monospace;">This is a paragraph with a monospace font.</p>

Try It Now

2. Font Size:

The font-size property defines the size of the text. You can specify it in various units like pixels (px), ems (em), percentages (%), etc.

Syntax:

font-size: 16px;

Try It Now

Example:

<p style="font-size: 20px;">This text is 20 pixels in size.</p>

Try It Now

3. Font Style

The font-style property allows you to make text italic or normal.

Values:

  • normal: Default text style.
  • italic: Italicized text.
  • oblique: Slanted text.

Syntax:

font-style: italic;

Try It Now

4. Font Weight

The font-weight property specifies the thickness of the font characters.

Values:

  • normal: Default weight.
  • bold: Bold text.
  • lighter: Lighter than normal.
  • bolder: Bolder than normal.
  • Numeric values: 100 (thin) to 900 (extra bold).

Syntax:

font-weight: bold;

Try It Now

Example:

<p style="font-weight: bold;">This text is bold.</p>

Try It Now

5. Font Variant

The font-variant property is used to display text in a small-caps font.

Values:

  • normal: Default text.
  • small-caps: Small caps text.

Syntax:

font-variant: small-caps;

Try It Now

Example:

<p style="font-variant: small-caps;">This text is in small caps.</p>

Try It Now

6. Shorthand Font Property

The font property is a shorthand for setting the style, variant, weight, size, line height, and family in a single declaration.

Syntax:

font: italic small-caps bold 16px/1.5 "Helvetica", sans-serif;

Try It Now

Order of values:

  1. font-style
  2. font-variant
  3. font-weight
  4. font-size/line-height
  5. font-family

Example:

<p style="font: italic bold 20px/1.5 'Arial', sans-serif;">This is a complex font example.</p>

Try It Now

Key Points to Remember:

  • Always provide a fallback font in case the primary font is not supported.
  • Use relative units (em, %) for responsive design.
  • Combine font properties using the shorthand to keep your CSS clean and concise.

With these fundamentals, you can style text effectively in your web projects!