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 detail description of 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 are Times New Roman, Garamond, Georgia, Literata, Minion, Perpetua, etc.

    Syntax:

    element {
        font-family:serif;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    Output:
    0

  • sans-serif: Its style is modern, formal and simple in appearance. Unlike “Serif” It does not have 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 are Verdana, Arial, Calibri, Helvetica, Futura, Impact, Lato, Optima, Skia, etc.
    element {
        font-family: sans-serif;
    }

    Example:



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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 are Flanella, Belluccia, Insolente, Corsiva, Zapfino, etc.

    Syntax:

    element {
        font-family:cursive;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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 are Courier, consolas, Monaco, SimSun, Terminal, Menlo, Inconsolata, etc.

    Syntax:

    element {
        font-family:monospace;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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 are Impact, Cracked, Critter, Studz, Copperplate, etc.

    Syntax:

    element {
        font-family:fantasy;
    }

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

    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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.