CSS | Generic font-family collection - GeeksforGeeks

09 Mar, 2021
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:
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:
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:
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:
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:
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 CarterCategory:sans-serifReleased on:1996
Designed By:Matthew Carter
Category:sans-serif
Released on:1996
helvetica:Designed By:Max Miedinger, Eduard HoffmannCategory:sans-serifReleased on:1957
Designed By:Max Miedinger, Eduard Hoffmann
Category:sans-serif
Released on:1957
courier:Designed By:Howard “Bud” KettlerCategory:MonospacedReleased on:~1956
Designed By:Howard “Bud” Kettler
Category:Monospaced
Released on:~1956
arial:Designed By:Robin Nicholas and Patricia SaundersCategory:Sans-serifReleased on:1982
Designed By:Robin Nicholas and Patricia Saunders
Category:Sans-serif
Released on:1982
impact:Designed By:Geoffrey LeeCategory:Sans-serifReleased on:1965
Designed By:Geoffrey Lee
Category:Sans-serif
Released on:1965
calibri:Designed By:Luc(as) de GrootCategory: Sans-serifReleased on:2007
Designed By:Luc(as) de Groot
Category: Sans-serif
Released on:2007
consolas:Designed By:Luc(as) de GrootCategory:MonospacedReleased on:2002
Designed By:Luc(as) de Groot
Category:Monospaced
Released on:2002
georgia:Designed By:Matthew CarterCategory: SerifReleased on: 1996
Designed By:Matthew Carter
Category: Serif
Released on: 1996
garamond:Designed By: Paul HicksonCategory:SerifReleased on: 1993
Designed By: Paul Hickson
Category:Serif
Released on: 1993
perpetua:Designed By:Eric GillCategory:SerifReleased on:1929-32
Designed By:Eric Gill
Category:Serif
Released on:1929-32
onyx:Designed By:Gerry PowellCategory:SerifReleased on: 1955
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:
CSS-Misc
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Top 10 Angular Libraries For Web Developers