Open In App

Bootstrap 5 Reboot Native Font Stack

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:

html,
body {
    font-family: system-ui, -apple-system,
        'Segoe UI', Roboto, Helvetica, Arial,
        sans-serif, 'Apple Color Emoji', 
        'Segoe UI Emoji', 'Segoe UI Symbol';
}
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';
}
.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.




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bootstrap 5 Reboot Native Font Stack
    </title>
    <link href=
          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>

Output:

 

Reference: https://getbootstrap.com/docs/5.0/content/reboot/#native-font-stack


Article Tags :