Bootstrap 5 Reboot Native Font Stack

Last Updated : 05 Jun, 2023

Bootstrap 5 Reboot Native font stack includes a native/system font stack that is intended to deliver consistent and appealing typography across several devices and platforms. These font stacks are designed specifically to support & consider modern devices, in order to enhance the rendering of the content appropriately on various screen-size & device-width. The font stack is defined in the default stylesheet and is made up of font families separated by commas. It contains many common symbols/dingbat Unicode characters, emoji fonts, etc, that will be displayed in the form of multi-colored pictographs, & their appearance will be different that will depend on the styles that are implemented for the browser/platform’s native font, & these will not affect the CSS color style used in it.

Syntax:

$font-family-Arial: system-ui, -apple-system, 'Segoe UI',
                     Roboto, Helvetica, Arial, sans-serif, 
                     'Apple Color Emoji', 'Segoe UI Emoji', 
                     'Segoe UI Symbol';

There are several examples or syntax provided that can utilize the BootStrap 5 Reboot Native font stack in CSS, which are described below:

Here, it shows changing the font family across the entire page. This example guarantees that all text on the website is presented in the font that is most suited to the user’s device and operating system.

html,
body {
    font-family: system-ui, -apple-system,
        'Segoe UI', Roboto, Helvetica, Arial,
        sans-serif, 'Apple Color Emoji', 
        'Segoe UI Emoji', 'Segoe UI Symbol';
}

Here, it shows syntax for font family selection for a given element This example guarantees that all headers on the page are shown in the font that is most suited to the user’s device and operating system.

h1, h2, h3, h4, h5, h6 {
    font-family: system-ui, -apple-system,
        'Segoe UI', Roboto, Helvetica, Arial,
        sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol';
}

Here, it shows the syntax for font family selection for a certain class. This example enables you to apply a consistent typeface to a subset of the page’s components.

.text {
    font-family: system-ui, -apple-system,
        'Segoe UI', Roboto, Helvetica, Arial,
        sans-serif, 'Apple Color Emoji', 
        'Segoe UI Emoji', 'Segoe UI Symbol';
}

When you use the Bootstrap 5 Reboot Native font stack in your CSS code, the browser will try to utilize the first available font in the stack, and if that fails, it will go on to the next font in the list until it finds an available font. You may use a technique to assign an element’s font family to the Bootstrap 5 Reboot Native font stack and ensure that your typography appears consistent and appealing across a broad range of devices and platforms.

Example: This example illustrates the basic usage of the Reboot Native font stack in Bootstrap 5.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        Bootstrap 5 Reboot Native Font Stack 
    </title> 
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet" 
          integrity= 
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous"> 
    <style> 
        body { 
            font-family: -apple-system, BlinkMacSystemFont,  
                "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,  
                "Helvetica Neue", Helvetica, Arial, sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
    <h3>Hello, Bootstrap 5!</h3> 
    <p> 
        This is an example of applying the 
        native font stack for Bootstrap 5's 
        reboot utility class. 
    </p> 
</body> 
  
</html>