Pure CSS Grids with Font-Family

Last Updated : 01 Sep, 2022

Pure CSS is a framework that can be used as a substitute for Bootstrap. It is an open-source solution that Yahoo developed for building responsive web pages and applications. It aids in creating a better user experience that is highly effective.

Pure CSS Grid is the class of this framework that can be used to lay out the grid to make the website responsive and give a better User experience.

There are 3 types of Pure CSS Grid Classes:

Grid Classes ( pure-g )
Unit Classes ( pure-u )
Responsive grid modification to unit classes

In this article, we will learn about how to use font family with Pure CSS Grids.

Syntax:

<style>
    html, button, input, select, textarea,
    .class-name {
        font-family: value;
    }
</style>

Example 1: Below are some examples in which we demonstrated the use of a grid with some classes.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
  
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css"
        integrity= 
"sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH"
        crossorigin="anonymous" /> 
          
    <style> 
        .pure-u { 
            font-family: Cambria, Cochin, Georgia, 
                Times, 'Times New Roman', serif; 
        } 
  
        div { 
            color: green; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="pure-u"> 
        <div style="font-weight:bold;" class="pure-g-1-2"> 
            Pure CSS Grid with font family</div> 
        <div class="pure-g-1-2">GeeksforGeeks</div> 
        <div class="pure-g-1-2">GeeksforGeeks</div> 
        <div class="pure-g-1-2">GeeksforGeeks</div> 
        <div class="pure-g-1-2">GeeksforGeeks</div> 
        <div class="pure-g-1-2">GeeksforGeeks</div> 
    </div> 
</body> 
  
</html> 

Output:

Example 2: Here is another example to use class pure-g with pure-u.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
  
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/pure-min.css"
        integrity= 
"sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH"
        crossorigin="anonymous" /> 
    <style> 
        .pure-g [class *="pure-u"] { 
            font-family: monospace; 
        } 
    </style> 
</head> 
  
<body> 
    <div style="color:green">  
        Pure CSS with font family  
    </div> 
      
    <div class="pure-g"> 
        <div class="pure-u-1-2"> GeeksforGeeks </div> 
        <div class="pure-u-1-2"> GeeksforGeeks </div> 
        <div class="pure-u-1-2"> GeeksforGeeks </div> 
        <div class="pure-u-1-2"> GeeksforGeeks </div> 
    </div> 
</body> 
  
</html> 