CSS | Generic font-family collection

The font-family property is used to set the font of text in HTML document. The different font-family is used to create attractive web pages. There are many fonts available to choose from font pool like Google fonts, Adobe fonts, etc and require font API linking and customization. Generic font families mainly come under following categories which are listed below:

Serif
Sans-serif
cursive
monospace
fantasy

The detailed description of the generic font-family are listed below:

serif: It is mostly used when text is written for printing purpose like books, newspaper, magazines, etc. Characters of the text are decorated with stroke at the end. The example of serif font-family is Times New Roman, Garamond, Georgia, Literata, Minion, Perpetua, etc.

Syntax:

element {
    font-family:serif;
}

Example:

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        Generic Font Family 

    </title> 

    <style> 

        .GFG { 

            font-family:serif ; 

        } 

        body { 

            color:green; 

            font-size:20px; 

        } 

    </style> 

</head> 

<body> 

    <p>GeeksforGeeks</p> 

    <p class = "GFG">GeeksforGeeks</p> 

</body> 

</html>

Output:

sans-serif: Its style is modern, formal and simple in appearance. Unlike “Serif” It does not have a stroke at the ends. It has a wide range of use but most often in the digital form of text. The example of sans-serif is Verdana, Arial, Calibri, Helvetica, Futura, Impact, Lato, Optima, Skia, etc.

element {
    font-family: sans-serif;
}

Example:

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        Generic Font Family 

    </title> 

    <style> 

        .GFG { 

            font-family:sans-serif ; 

        } 

        body { 

            color:green; 

            font-size:20px; 

        } 

    </style> 

</head> 

<body> 

    <p>GeeksforGeeks</p> 

    <p class = "GFG">GeeksforGeeks</p> 

</body> 

</html>

Output:

cursive: This type of font is mostly used in the invitation letter, informal messages, headlines, etc. Its appearance is like, handwritten text using a pen or brush. The example of cursive font-family is Flanella, Belluccia, Insolente, Corsiva, Zapfino, etc.

Syntax:

element {
    font-family:cursive;
}

Example:

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        Generic Font Family 

    </title> 

    <style> 

        .GFG { 

            font-family:cursive; 

        } 

        body { 

            color:green; 

            font-size:20px; 

        } 

    </style> 

</head> 

<body> 

    <p>GeeksforGeeks</p> 

    <p class = "GFG">GeeksforGeeks</p> 

</body> 

</html>

Output:

monospace: It is used to give examples, typewritten text, instructions, mailing address, code samples, etc.Each character of the text has got the same width. The example of monospace font-family is Courier, Consolas, Monaco, SimSun, Terminal, Menlo, Inconsolata, etc.

Syntax:

element {
    font-family:monospace;
}

Example:

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        Generic Font Family 

    </title> 

    <style> 

        .GFG { 

            font-family:monospace; 

        } 

        body { 

            color:green; 

            font-size:20px; 

        } 

    </style> 

</head> 

<body> 

    <p>GeeksforGeeks</p> 

    <p class = "GFG">GeeksforGeeks</p> 

</body> 

</html>

Output:

fantasy: It is used to make the text more decorative, impactful and expressive. This type of font should be used in the shorter text, as it is not easy to read it easily always. The example of fantasy font-family is Impact, Cracked, Critter, Studz, Copperplate, etc.

Syntax:

element {
    font-family:fantasy;
}

Example:

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        Generic Font Family 

    </title> 

    <style> 

        .GFG { 

            font-family:fantasy; 

        } 

        body { 

            color:green; 

            font-size:20px; 

        } 

    </style> 

</head> 

<body> 

    <p>GeeksforGeeks</p> 

    <p class = "GFG">GeeksforGeeks</p> 

</body> 

</html>

Output:

Followings are the description of some font family mentioned as examples in above generic font-families are listed below:

Verdana:
- Designed By:Matthew Carter
- Category:sans-serif
- Released on:1996
helvetica:
- Designed By:Max Miedinger, Eduard Hoffmann
- Category:sans-serif
- Released on:1957
courier:
- Designed By:Howard “Bud” Kettler
- Category:Monospaced
- Released on:~1956
arial:
- Designed By:Robin Nicholas and Patricia Saunders
- Category:Sans-serif
- Released on:1982
impact:
- Designed By:Geoffrey Lee
- Category:Sans-serif
- Released on:1965
calibri:
- Designed By:Luc(as) de Groot
- Category: Sans-serif
- Released on:2007
consolas:
- Designed By:Luc(as) de Groot
- Category:Monospaced
- Released on:2002
georgia:
- Designed By:Matthew Carter
- Category: Serif
- Released on: 1996
garamond:
- Designed By: Paul Hickson
- Category:Serif
- Released on: 1993
perpetua:
- Designed By:Eric Gill
- Category:Serif
- Released on:1929-32
onyx:
- Designed By:Gerry Powell
- Category:Serif
- Released on: 1955

Example: This example use different types of font-family.

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        Generic Font Family 

    </title> 

    <style> 

        body { 

            color:green; 

            font-size:20px; 

        } 

    </style> 

</head> 

<body> 

    <p>GeeksforGeeks</p> 

    <p style="font-family:verdana;">GeeksforGeeks</p> 

    <p style="font-family:helvetica;">GeeksforGeeks</p> 

    <p style="font-family:courier;">GeeksforGeeks</p> 

    <p style="font-family:arial;">GeeksforGeeks</p> 

    <p style="font-family:impact;">GeeksforGeeks</p> 

    <p style="font-family:calibri;">GeeksforGeeks</p> 

    <p style="font-family:consolas;">GeeksforGeeks</p> 

    <p style="font-family:georgia;">GeeksforGeeks</p> 

    <p style="font-family:garamond;">GeeksforGeeks</p> 

    <p style="font-family:perpetua;">GeeksforGeeks</p> 

    <p style="font-family:onyx;">GeeksforGeeks</p> 

</body> 

</html>

Output:

Article Tags :

CSS

Web Technologies

CSS-Misc