learn2kode.in

Menu

CSS Tutorial

Menu

CSS Fonts

CSS Fonts allow you to control how text appears across your website. With font-related properties, you can change the typeface, size, weight, spacing, and apply custom web fonts to create a unique design.

1. Font Family

The font-family property defines the typeface used for text.

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

You can list multiple fonts as fallback options.

  • Web-safe fonts: Arial, Verdana, Times New Roman
  • Generic families: serif, sans-serif, monospace, cursive, fantasy

2. Font Size

The font-size property controls how big or small the text appears. Common units:

  • px → fixed size
  • em → relative to parent font size
  • rem → relative to root font size
  • vw/vh → responsive to viewport
Copy Text 
h1 {
  font-size: 2rem;
}

3. Font Weight

This property defines how bold or light text appears.

Example

Copy Text 
p {
  font-weight: 600; /* semi-bold */
}

Common values:

  • normal
  • bold
  • Numeric: 100 – 900

4. Font Style

Used to apply italic or oblique styles.

Copy Text 
em {
  font-style: italic;
}

5. Line Height

Controls vertical spacing between lines of text.

Copy Text 
p {
  line-height: 1.6;
}

Good line-height improves readability.

6. Letter & Word Spacing

Copy Text 
p {
  letter-spacing: 1px;
  word-spacing: 5px;
}

Useful for typography design.

7. Using Web Fonts (Google Fonts)

You can load external fonts using @import or <link>.

Using <link>

Copy Text 
body {
  font-family: "Poppins", sans-serif;
}

Web fonts allow modern, stylish typography without needing local installation.

8. Font Shorthand

You can combine multiple font properties in one line:

Copy Text 
p {
  font: italic small-caps 600 18px/1.6 "Poppins", sans-serif;
}

Order matters here.

CSS Links