Source® Sans 3, Google's open source typeface family. It is a sans serif typeface intended to work well in user interfaces.

To understand in more detail the font usage take a look to the following documentation:

• Bootstrap Typography
• Bootstrap RFS

Our fonts configuration works the same as bootstrap, however, the values are in css variables directly in the :root using rfs and media queries instead of being directly in each tag.

Based on this, the following variables are found in the.

Which are used in each tag using a reference variable:

    
      --bs-fs-display-1: var(--bs-rfs-display-1);
      --bs-fs-display-2: var(--bs-rfs-display-2);
      --bs-fs-display-3: var(--bs-rfs-display-3);
      --bs-fs-display-4: var(--bs-rfs-display-4);
      --bs-fs-display-5: var(--bs-rfs-display-5);
      --bs-fs-display-6: var(--bs-rfs-display-6);
      --bs-fs-1: var(--bs-rfs-fs-1);
      --bs-fs-2: var(--bs-rfs-fs-2);
      --bs-fs-3: var(--bs-rfs-fs-3);
      --bs-fs-4: var(--bs-rfs-fs-4);
      --bs-fs-5: var(--bs-rfs-fs-5);
      --bs-fs-6: var(--bs-rfs-fs-6);
      --bs-fs-small: var(--bs-rfs-fs-small);
      --bs-fs-body-large: var(--bs-rfs-fs-body-large);
      --bs-fs-body-medium: var(--bs-rfs-fs-body-medium);
      --bs-fs-body-normal: var(--bs-rfs-fs-body-normal);
      --bs-fs-body-small: var(--bs-rfs-fs-body-small);
      --bs-fs-body-tiny: var(--bs-rfs-fs-body-tiny);
    
  

as:

    
      h1, .h1 {
        font-size: var(--bs-fs-1);
      }

      .fs-3 {
        font-size: var(--bs-fs-3) !important;
      }

      .display-2 {
        --bs-display-font-size: var(--bs-fs-display-2);
      }

      .fs-body-small {
        --bs-fs-body-font-size: var(--bs-fs-body-small);
      }
    
  

Heading

Body

Display