Bootstrap Default Font Stack
Explore Bootstrap's native font stack that replaced Helvetica Neue in Bootstrap 4, and learn how to customise it via Sass variables.
Detailed Explanation
Bootstrap's Native Font Stack
Bootstrap 4 introduced a system font stack, moving away from the Helvetica Neue stack used in Bootstrap 3. This change was motivated by performance (no external font downloads) and native feel.
The Declaration (Bootstrap 5)
$font-family-sans-serif:
system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", "Noto Sans", "Liberation Sans",
Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace:
SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
Evolution from Bootstrap 3
| Version | Stack |
|---|---|
| Bootstrap 3 | "Helvetica Neue", Helvetica, Arial, sans-serif |
| Bootstrap 4 | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif |
| Bootstrap 5 | system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif + emoji fonts |
Customisation via Sass
// _custom-variables.scss
$font-family-sans-serif: "Inter", system-ui, -apple-system,
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
$font-family-base: $font-family-sans-serif;
// Headings can use a different stack
$headings-font-family: "Poppins", system-ui, sans-serif;
Why Noto Sans?
Bootstrap 5 added Noto Sans to improve coverage for CJK (Chinese, Japanese, Korean) characters and other non-Latin scripts on Linux systems. Without it, Linux users might see a default serif font for CJK characters, breaking the visual consistency of the page.
Bootstrap vs Tailwind
Both frameworks now use system font stacks by default. The main difference is that Tailwind uses the newer ui-sans-serif keyword first, while Bootstrap leads with system-ui. In practice, both resolve to the same fonts on modern browsers.
Use Case
Useful for Bootstrap-based projects that need to understand or override the default typography. Also valuable as a reference when migrating from Bootstrap 3's Helvetica-based stack.