CSS Fonts

Choosing the right font is a crucial part of web design, as it directly affects the style and readability of the website. CSS provides a range of properties to control fonts.

`font-family`

The font-family property is used to specify the font for an element. Since you cannot guarantee that the user's computer has the specific font you specified installed, the font-family property can accept a "font stack" consisting of multiple font names, separated by commas.

The browser will check the fonts in the list from left to right and use the first one available on the user's system.

css

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

In this example, the browser will first try to use "Times New Roman". If it's not found, it will try Times. If that's also not found, it will use the system's default serif font.

Best Practices:

Quote font names containing spaces: e.g., "Times New Roman".
Provide a generic font family at the end: Always provide a generic font family (such as serif, sans-serif, monospace) at the end of the font stack as a fallback.

Generic Font Families

serif: Fonts with "feet" or decorative strokes, like Times New Roman. Often used for print.
sans-serif: "Without serif" fonts, with clean lines, like Arial, Helvetica. The most commonly used font type on the web.
monospace: Fixed-width fonts, where each character occupies the same width, like Courier. Often used for displaying code.
cursive: Fonts that mimic handwriting styles.
fantasy: Decorative fonts, used for headings, etc.

`font-style`

The font-style property is mainly used to specify the style of the font, usually to set it to italic.

normal: (Default) The text is shown normally.
italic: Uses the italic version of the font.
oblique: If the font does not have an italic version, the browser simulates italics by slanting the normal version of the text.

css

p.italic {
  font-style: italic;
}

`font-weight`

The font-weight property is used to set the thickness (weight) of the font.

normal: (Default) Normal weight, equivalent to 400.
bold: Bold, equivalent to 700.
You can also use numeric values: 100, 200, ..., 900. But this requires the font itself to support these different weights.

css

p.bold {
  font-weight: bold;
}

p.light {
  font-weight: 300;
}

`font-size`

The font-size property is used to set the size of the font.

Pixels (px): font-size: 16px;. This is an absolute unit, providing precise control.
em: font-size: 1.2em;. This is a relative unit. 1em equals the font size of the current element's parent. 1.2em means 1.2 times the parent element's font size.
rem (root em): font-size: 1.2rem;. This is a unit introduced in CSS3. 1rem equals the font size of the root element (<html>). Using rem makes it easy to scale the font size of the entire website and is the preferred unit in modern responsive design.
Percentage (%): font-size: 120%;. Similar to em.

css

html {
  font-size: 16px; /* Define root font size */
}

body {
  font-size: 1rem; /* Equals 16px */
}

h1 {
  font-size: 2rem; /* Equals 32px */
}

`font` (Shorthand Property)

Like background, font is also a shorthand property that allows you to set multiple font-related properties in a single line. The order is as follows:

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

Note: font-size and font-family are required.

css

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

`@font-face` (Web Fonts)

If you want to use custom fonts that are not installed on the user's computer, you can use the CSS3 @font-face rule. This allows you to load font files from a server.

css

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

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

Services like Google Fonts allow you to easily use a large number of high-quality free Web fonts on your website.

CSS Fonts ​

font-family ​

Generic Font Families ​

font-style ​

font-weight ​

font-size ​

font (Shorthand Property) ​

@font-face (Web Fonts) ​