CSS Font Family Property


The font family of a text is set with the font-family property.

Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

Syntax

font-family: font|initial|inherit;
Generic font name Type of font Example
serif Fonts with serifs Time
sans-serif Fonts without serifs Arial
monospace Fixed-width fonts Curier
cursive Fonts that emulate handwritting Comic Sans
fantasy Decorative fonts for title and so on Impact

Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".

More than one font family is specified in a comma-separated list:

 .one{
        font-family:arial,verdana,sans-serif;
     }

Example of font-Family

 <!DOCTYPE html>
    <html>
     <head>
        <style type="text/css">
        .one{
        font-family:arial,verdana,sans-serif;
        }
        .two{
        font-family:courier new;
        }
        .three{
        font-family:impact;
        }
        </style>
        </head>
        <body>
        <p class="p1">Ashwani</p>
        <p class="p2">Sachin</p>
        <p class="p3">Welcome to CSS Tutorial</p>
     </body>
    </html>
Output

Ashwani

Sachin

Welcome to CSS Tutorial


Share this article on