font-family
Definition
The font-family property in CSS is used to specify the font or list of fonts to be used for an HTML element's text content. The list of fonts is declared as a prioritized comma-separated list of font family names, with the first font in the list being the preferred font, and subsequent fonts being fallbacks in case the preferred font is not available on the user's system.
Examples
Use a custom font from a web font service:
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
font-family: 'Open Sans', sans-serif;
}
</style>
Use a system font for a specific element:
<h1 style="font-family: Arial, sans-serif;">Hello, World!</h1>
Specify multiple fallback fonts:
<p style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;">This text should be displayed in Helvetica Neue if available, or one of the other specified fonts if not.</p>
Values
| Value | Description |
|---|---|
font-family: serif; | A font family with serifs (decorative lines at the end of strokes), such as Times New Roman, Georgia, or Baskerville. |
font-family: sans-serif; | A font family without serifs, such as Arial, Helvetica, or Verdana. |
font-family: monospace; | A font family with fixed-width characters, such as Courier or Consolas. |
font-family: cursive; | A font family with a handwritten or script-like appearance, such as Comic Sans or Brush Script. |
font-family: fantasy; | A font family with an ornamental or decorative appearance, such as Papyrus or Jokerman. |
font-family: initial; | Sets the font family to the browser's default value. |
font-family: inherit; | Inherits the font family from the element's parent. |
Best Practices
- Specify multiple font families in the font-family property to ensure that a suitable font is always used, even if the preferred font is not available.
- Use web fonts sparingly, as they can slow down page load times and may not be available to all users.
- When using custom fonts, always include a fallback font with a similar style to ensure that the text is still readable even if the custom font fails to load.
- Consider the context in which the font will be used, and choose a font family that is appropriate for the content and the intended audience.
- Test your font choices on different devices and browsers to ensure that they are legible and display correctly in all situations.
Browser Compatibility
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |