Tachyons Typography Garamond

Last Updated : 23 Jun, 2022

Tachyons is a free and open-source that is used to create a responsive website. In this article, we will see how to use the Garamond font family with the Tachyons toolkit.

Garamond is the name of the font typeface that can be applied to elements in the website.

Tachyons Typography Garamond Class:

garamond: This class is used to apply the Garamond font family.
fw: This class is used to set the font-weight of the text.
i: This class is used to set the font style to italic.

Syntax:

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

Typeface alphabets: Appearance of alphabets, numerical values, and special character in Garamond.

Example 1: In the below example, we will make use of the Garamond class to style different variations of the text.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="green">GeeksforGeeks</h1> 
        <h3> 
          Tachyons Typography  Garamond 
        </h3> 
        <p class="garamond">Garamond in normal font</p> 
  
        <p style="font-style: bold"
           class="garamond">Garamond in bold</p> 
  
        <p style="font-style: italic"
           class="garamond">Garamond in italics</p> 
  
        <p style="font-weight:800"
           class="garamond">Garamond with higher weight</p> 
  
        <p style="font-weight:100"
           class="garamond">Garamond with lower weight</p> 
  
    </center> 
</body> 
</html>

Output:

Example 2: In the below example, we will make use of the Garamond class with italics to style the text in the buttons.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />  
</head> 
  
<body> 
    <center> 
        <h1 class="green">GeeksforGeeks</h1> 
        <h3 class="garamond"> 
            Tachyons Typography Garamond 
        </h3> 
        <button class="garamond i">GFG</button> 
        <button class="garamond i">DSA</button> 
        <button class="garamond i">CN</button> 
    </center> 
</body> 
</html>