Skip to content
preservelog

  1. Fonts
  • Font-family property
  • Font size and weight
  • @font-face rule and web fonts

Fonts in CSS

Section titled “Fonts in CSS”

Fonts are a critical aspect of web design as they significantly impact the readability, aesthetic appeal, and overall user experience of a website. CSS provides various properties and rules to control how text is displayed, including the font-family, font size, weight, and custom web fonts through the @font-face rule. Let’s explore each in detail:

1. Font-family Property

Section titled “1. Font-family Property”

The font-family property in CSS specifies the typeface that should be applied to the text content of an element. This property allows you to define a list of fonts, from most preferred to least, with the browser choosing the first available font in the list.

Syntax:

selector {
  font-family: "font1", "font2", "generic-family";
}

Details:

  • Font Stack: You can list multiple fonts as a fallback mechanism. For instance, if the browser does not support the first font, it will try the next one in the list. The last option is usually a generic font family.

  • Generic Families: There are five generic font families that can be used:

  • serif: Fonts like Times New Roman or Georgia (with small lines or strokes at the ends of characters).

  • sans-serif: Fonts like Arial or Helvetica (without lines or strokes).

  • monospace: Fonts like Courier or Consolas (where each character occupies the same width).

  • cursive: Fonts that emulate handwriting, like Comic Sans or Brush Script.

  • fantasy: Decorative fonts, like Impact.

Example:

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

In this example, the browser will first attempt to use “Helvetica Neue”. If it’s unavailable, it will fall back to Arial, and if neither is available, it will use any available sans-serif font.

2. Font Size and Weight

Section titled “2. Font Size and Weight”

Font Size

Section titled “Font Size”

The font-size property controls the size of the text. You can define it using various units, including:

  • Absolute units:

  • px (pixels): Specifies an exact size, like 16px.

  • pt (points): Mainly used for print media, 1pt = 1/72 of an inch.

  • Relative units:

  • em: Relative to the font size of the parent element. For instance, 2em is twice the size of the parent font size.

  • rem: Relative to the font size of the root element (html), providing consistency across the document.

  • %: Relative to the parent element’s font size. 100% would be equal to the parent font size.

  • vw, vh: Relative to the viewport width and height respectively.

Example:

p {
  font-size: 16px;
}

This sets the font size of paragraph text to 16 pixels.

Font Weight

Section titled “Font Weight”

The font-weight property determines the thickness or boldness of the font.

  • Keywords: You can use predefined keywords like normal, bold, bolder, and lighter.
  • Numeric Values: You can specify weights using numeric values from 100 (thin) to 900 (extra bold). Common values include:
  • 400: Normal weight.
  • 700: Bold weight.

Example:

h1 {
  font-weight: bold;
}


p {
  font-weight: 300; /* Light weight */
}

In this example, the <h1> element will be bold, and the <p> element will have a lighter font weight.

3. @font-face Rule and Web Fonts

Section titled “3. @font-face Rule and Web Fonts”

The @font-face rule allows you to load custom fonts from external sources or your server, enabling the use of fonts that are not installed on the user’s device. This is particularly useful for ensuring a consistent visual appearance across different devices and browsers.

Syntax:

@font-face {
  font-family: "CustomFont";
  src:
    url("CustomFont.woff2") format("woff2"),
    url("CustomFont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

Details:

  • font-family: The name you want to assign to the custom font. This name will be used in the font-family property elsewhere in your CSS.

  • src: Defines the source of the font file. You can provide multiple formats (like .woff, .woff2, .ttf, etc.) to ensure compatibility across different browsers. Each format has its strengths:

  • woff (Web Open Font Format) and woff2: Highly recommended for web use due to compression and browser support.

  • ttf (TrueType Font): A widely supported font format.

  • otf (OpenType Font): Similar to TTF with additional features like advanced typography.

  • font-weight: Specifies the weight (normal, bold, etc.) of the font.

  • font-style: Specifies the style (normal, italic, etc.) of the font.

Example:

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


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

Here, “MyCustomFont” is loaded and applied to the body text. If the custom font fails to load, the browser will fall back to Arial, and then to a sans-serif font.

Web Fonts:

  • Google Fonts: One of the most popular sources of web fonts, Google Fonts offers a wide range of free fonts that can be easily integrated using a simple @import rule or <link> tag in HTML.

  • Adobe Fonts (Typekit): A subscription-based service offering a vast collection of high-quality fonts for web and desktop use.

Example using Google Fonts:

<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
  rel="stylesheet"
/>
body {
  font-family: "Roboto", sans-serif;
}

This example uses the Roboto font from Google Fonts, with normal (400) and bold (700) weights available.

By understanding and utilizing these CSS font properties and rules, you can create more visually appealing and accessible web designs.