/* ================================================================ typography.css — ONE FONT, APPLICATION-WIDE ---------------------------------------------------------------- MUST be the LAST stylesheet in . Bootstrap, Kendo and toastr are all loaded from CDNs after bridgex.css, and each ships its own font-family rules: Bootstrap body { font-family: var(--bs-body-font-family) } Kendo .k-* { font-family: var(--kendo-font-family) } toastr #toast-container * { font-family: ... } Bootstrap's `body` rule (specificity 0,0,1) beats reset.css's identical rule purely on source order, so before this file existed the app's base font was actually Bootstrap's stack, not the theme's. ── WHY THE UNIVERSAL SELECTOR IS SAFE ── `* { font-family: inherit }` has specificity (0,0,0) — the lowest possible. Every icon font binds its family through a CLASS selector (0,1,0): .fa, .fa-solid, .fa-brands → Font Awesome 6 .k-icon, [class^="k-i-"] → WebComponentsIcons so all of them beat this rule and keep their glyphs. Pseudo-elements are also untouched: `*` matches elements only, so `.fa-solid::before` still inherits Font Awesome from its own element. Do not add !important here — that is what would break the icons. ================================================================ */ /* Everything inherits, so there is exactly one place the font is set. */ * { font-family: inherit; } /* The single source. Element selectors (0,0,1) beat the `*` above. */ html, body { font-family: var(--bx-font); } /* Form controls do not inherit font by default in any browser. The `*` rule already covers them; these are listed explicitly because UA stylesheets are the one thing that surprises people here. */ input, select, textarea, button, optgroup, option { font-family: var(--bx-font); } /* ── APP SHELL ──────────────────────────────────────────────────── Sidebar, header and top nav declare no font of their own and already inherit from body. These pins are a GUARANTEE, not a fix: they stop a future rule on `nav` / `header` (or a vendor sheet targeting those elements) from quietly forking the shell onto a different face. Pin the CONTAINERS only. A descendant-universal selector like `.ef-sidebar *` would be specificity (0,1,0) — a tie with `.fa-solid` — and because this file loads last it would WIN and blank every icon. Container pins let inheritance do the work while class-based icon fonts still outrank the `*` rule above. */ .ef-sidebar, .ef-header, .ef-topnav-bar { font-family: var(--bx-font); } /* ── BOOTSTRAP ──────────────────────────────────────────────────── Re-point Bootstrap's own tokens rather than fighting its rules, so any component reading them (badges, modals, tooltips) follows too. */ :root { --bs-font-sans-serif: var(--bx-font); --bs-font-monospace: var(--bx-font); --bs-body-font-family: var(--bx-font); } /* ── KENDO ──────────────────────────────────────────────────────── kendo-theme-override.css already maps --kendo-font-family; these catch the widgets that hardcode a stack instead of reading it. */ .k-widget, .k-grid, .k-grid-header, .k-grid-content, .k-toolbar, .k-input, .k-input-inner, .k-button, .k-list, .k-list-item, .k-popup, .k-window, .k-dialog, .k-tooltip, .k-calendar, .k-treeview, .k-tabstrip, .k-pager, .k-pager-wrap, .k-chip, .k-notification { font-family: var(--bx-font); } /* ── TOASTR ───────────────────────────────────────────────────── */ #toast-container, #toast-container > div, .toast-title, .toast-message { font-family: var(--bx-font); } /* ── NUMERIC ALIGNMENT ──────────────────────────────────────────── Monospace used to do the column-alignment work. With one font that job moves to tabular figures, which keep digits on a fixed advance width without changing typeface. Applied at the call sites that previously used var(--font-mono); this is the safety net for tables the sweep did not name individually. */ table td, table th, .k-grid td, .k-grid th { font-variant-numeric: tabular-nums; } /* Code-ish content keeps its semantics but not a second typeface. */ code, kbd, pre, samp { font-family: var(--bx-font); font-variant-numeric: tabular-nums; }