Tachyons Typography Font Families

Last Updated : 05 Jul, 2022

Font families in Tachyons are the font-family property that specifies an element’s font. 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.

Used Classes:

sans-serif: This class is used to provide sans-serif style to the font.
serif: This class is used to provide serif style to the font.
system-sans-serif: This class is used to provide a system-sans-serif style to the font.
system-serif: This class is used to provide system-serif style to the font.

Monospaced Typefaces that are taken from http://cssfontstack.com:

code: This class is used to provide code style to the font.
courier: This class is used to provide courier style to the font.

Sans-Serif Typefaces:

Helvetica: This class is used to provide helvetica style to the font.
Avenir: This class is used to provide avenir style to the font.
Serif Typefaces: This class is used to provide serif typefaces style to the font.
Athelas: This class is used to provide athelas style to the font.
Georgia: This class is used to provide Georgia style to the font.
Times: This class is used to provide times style to the font.
Bodoni: This class is used to provide bodoni style to the font.
Calisto: This class is used to provide catisto style to the font.
Garamond: This class is used to provide garamond style to the font.
Baskerville: This class is used to provide baskerville style to the font.

Syntax:

<element-name class="class-name">
     ...
</element-name>

Example 1: In this code, we will make use of the above classes to demonstrate the font family.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body { 
            text-align:center;         
        } 
    </style> 
</head> 
  
<body>     
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3> 
      
    <h1 class="serif">GeeksforGeeks</h1> 
    <h1 class="system-sans-serif">GeeskforGeeks</h1> 
    <h1 class="system-serif">GeeksforGeeks</h1> 
    <h1>GeeskforGeeks</h1> 
</body> 
</html>

Output:

Example 2: In this code, we will make use of the above classes to demonstrate the font family.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons/css/tachyons.min.css"> 
  
    <style> 
        body{ 
            text-align:center;         
        } 
    </style> 
</head> 
<body>     
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3>A computer science portal for geeks</h3> 
      
    <h1 class="helvetica">GeeksforGeeks</h1> 
    <h1 class="avenir ">GeeskforGeeks</h1> 
    <h1 class="athelas">GeeksforGeeks</h1> 
    <h1 class="georgia">GeeskforGeeks</h1> 
</body> 
</html> 