Tailwind CSS Font Family - GeeksforGeeks

23 Mar, 2022
This class accepts a lot of font names in tailwind CSS in which all the properties are covered in class form.  It is the alternative to the CSS font-family property. This class is used to specify the font of an element. It can have multiple fonts as a backup system i.e. if the browser does not support one font then the other can be used.
Font family classes:
font-sans
font-serif 
font-mono
font-sans: This class is used to apply a websafe sans-serif font family, like ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, “Segoe UI“, Roboto, “Helvetica Neue“, Arial, “Noto Sans“, sans-serif, “Apple Color Emoji“, “Segoe UI Emoji“, “Segoe UI Symbol“, “Noto Color Emoji“, etc.
Syntax:
<element class="font-sans">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Font Family Class</b>     <div class="mx-24 bg-green-200">        <p class="font-sans p-4">            Geeksforgeeks: A Computer Science portal for Geeks        </p>        </div></body>   </html>
Output:
font-serif: This class is used to apply a websafe serif font-family like ui-serif, Georgia, Cambria, “Times New Roman“, Times, serif, etc.
Syntax:
<element class="font-serif">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Font Family Class</b>     <div class="mx-24 bg-green-200">        <p class="font-serif  p-4">            Geeksforgeeks: A Computer Science portal for Geeks        </p>      </div></body>   </html> 
Output: 
font-mono: This class is used to apply a websafe monospaced font-family like ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, “Liberation Mono“, “Courier New“, monospace, etc.
Syntax: 
<element class="font-mono">...</element>
Example:
HTML
<!DOCTYPE html> <head>     <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"           rel="stylesheet"> </head>   <body class="text-center mx-4 space-y-2">     <h1 class="text-green-600 text-5xl font-bold">        GeeksforGeeks    </h1>     <b>Tailwind CSS Font Family Class</b>     <div class="mx-24 bg-green-200">        <p class="font-mono p-4">            Geeksforgeeks: A Computer Science portal for Geeks        </p>        </div></body>   </html> 
Output:
Tailwind CSS
Tailwind-Typography
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills