Bootstrapデフォルトフォントスタック

Bootstrapのネイティブフォントスタック

Bootstrap 4はシステムフォントスタックを導入し、Bootstrap 3で使用されていたHelvetica Neueスタックから移行しました。この変更は、パフォーマンス（外部フォントのダウンロードなし）とネイティブ感を動機としています。

宣言（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";

Bootstrap 3からの進化

バージョン	スタック
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 + 絵文字フォント

Sassによるカスタマイズ

$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-font-family: "Poppins", system-ui, sans-serif;

なぜNoto Sansか？

Bootstrap 5は、LinuxシステムでのCJK（中国語、日本語、韓国語）文字やその他の非ラテンスクリプトのカバレッジを改善するためにNoto Sansを追加しました。

Bootstrap vs Tailwind

両フレームワークとも現在デフォルトでシステムフォントスタックを使用しています。主な違いは、Tailwindが新しいui-sans-serifキーワードを先頭に置き、Bootstrapがsystem-uiをリードする点です。実際には、モダンブラウザでは両方とも同じフォントに解決されます。