CSS Font Family
The font-family property sets the typeface for text and takes a prioritized list of fonts with a generic fallback.
The <font-family> property tells the browser which typeface to use. You provide a comma-separated list of fonts, and the browser uses the first one available on the user's device, moving down the list if it is missing.
The font stack
This ordered list is called a font stack. It should always end with a generic family so there is a sensible fallback if none of your named fonts are found.
A sans-serif stack
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Site Heading</h1>
<p>Body text rendered in a sans-serif stack.</p>
</body>
</html>Note: Wrap any font name that contains spaces in quotes, for example font-family: "Times New Roman", serif.
Monospace for code
<!DOCTYPE html>
<html>
<head>
<style>
code, pre {
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<p>Run <code>npm install</code> to get started.</p>
<pre>console.log("hello");</pre>
</body>
</html>To use typefaces that are not installed on the user's device, see CSS Google Fonts.
