font-family

by

The font-family property in CSS specifies the font or font family for an element.

Syntax

font-family: font-name1, font-name2, generic-family;

Explanation

  • font-name1, font-name2: Specific font names.
  • generic-family: A general font category (e.g., serif, sans-serif, monospace, cursive, fantasy).

Example

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

This code will apply the Arial font if it’s available on the user’s system. If not, it will try Helvetica, and if that’s also unavailable, it will use a sans-serif font.

Best Practices

  • List multiple fonts: Provide fallback options to ensure consistent appearance across different systems.
  • Use generic families: As a final fallback, use a generic family to maintain basic readability.
  • Consider font-weight and font-style: Combine font-family with font-weight and font-style for more precise control.
  • Test across browsers: Different browsers may render fonts differently.

Additional Tips

  • Font-face rule: For custom fonts, use the @font-face rule to import them into your CSS.
  • Web-safe fonts: Choose fonts that are widely available to avoid issues with font rendering.
  • Font pairing: Consider combining different font families for headings and body text to create visual hierarchy.

Example with Font-face

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

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

By following these guidelines, you can effectively use the font-family property to enhance the typography of your web pages.