CSS Font

CSS font Property – Set Font Style, Size, and Family in CSS

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;

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;

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;

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;

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;

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!