The font-family CSS property allows for a prioritized list of font family names and/or generic family names to be specified for the selected element. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer, or that can be downloaded using the information provided by a @font-face at-rule.
Web authors should always add at least one generic family in a font-family list, since there’s no guarantee that a specific font is intalled on the computer or can be downloaded using a @font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.
It is often convenient to use the shorthand property font to set font-size and other font related properties all at once.

<!DOCTYPE html>
            .exampleserif {
                font-family: Times, "Times New Roman", Georgia, serif;
            } .examplesansserif {
                font-family: Verdana, Arial, Helvetica, sans-serif;
            } .examplemonospace {
                font-family: "Lucida Console", Courier, monospace;
            } .examplecursive {
                font-family: cursive;
            } .examplefantasy {
                font-family: fantasy;
        <div class="exampleserif">
            This is an example of a serif font.
        <div class="examplesansserif">
            This is an example of a sans-serif font.
        <div class="examplemonospace">
            This is an example of a monospace font.
        <div class="examplecursive">
            This is an example of a cursive font.
        <div class="examplefantasy">
            This is an example of a fantasy font.