50 lines
2.0 KiB
JavaScript
50 lines
2.0 KiB
JavaScript
|
// CubeCraft Creations brand font loader.
|
||
|
|
//
|
||
|
|
// The `cubecraft` theme sets Nunito as the font family, but a theme is only a
|
||
|
|
// bag of CSS variables — it cannot declare an @font-face. The production card
|
||
|
|
// declares one for itself (ensureBrandFont() in cubecraft-production-card.js),
|
||
|
|
// but only on the dashboard where that card is mounted, and only inside that
|
||
|
|
// page's document. Everything else falls back to system-ui.
|
||
|
|
//
|
||
|
|
// Loading this as a frontend module puts the declaration in the document head
|
||
|
|
// on every dashboard, so the whole UI gets Nunito.
|
||
|
|
//
|
||
|
|
// The .woff2 itself is NOT vendored here. It is already shipped and served by
|
||
|
|
// the cubecraft_production integration at STATIC_URL (see const.py: DOMAIN ->
|
||
|
|
// "/cubecraft_production"), which keeps a single copy of the file and one
|
||
|
|
// version to bump. If that integration is ever removed the URL 404s, the
|
||
|
|
// font-family falls through to the stack in the theme, and nothing else breaks.
|
||
|
|
//
|
||
|
|
// Wired up by `frontend.extra_module_url` in configuration.yaml.
|
||
|
|
|
||
|
|
const FONT_STYLE_ID = "cubecraft-brand-font";
|
||
|
|
const FONT_URL = "/cubecraft_production/nunito.woff2";
|
||
|
|
|
||
|
|
// extra_module_url modules are evaluated once per page load, but the card may
|
||
|
|
// have already injected its own copy under a different id — matching on the
|
||
|
|
// family as well keeps us from stacking duplicate @font-face rules.
|
||
|
|
function injectBrandFont() {
|
||
|
|
if (document.getElementById(FONT_STYLE_ID)) return;
|
||
|
|
if (document.getElementById("cubecraft-production-font")) return;
|
||
|
|
|
||
|
|
const style = document.createElement("style");
|
||
|
|
style.id = FONT_STYLE_ID;
|
||
|
|
// Variable weight range 400..800 — the card uses 400 (body), 600/700
|
||
|
|
// (labels, summaries) and 800 (titles, order numbers).
|
||
|
|
style.textContent =
|
||
|
|
"@font-face{" +
|
||
|
|
"font-family:'Nunito';" +
|
||
|
|
`src:url('${FONT_URL}') format('woff2');` +
|
||
|
|
"font-weight:400 800;" +
|
||
|
|
"font-style:normal;" +
|
||
|
|
"font-display:swap;" +
|
||
|
|
"}";
|
||
|
|
document.head.appendChild(style);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.head) {
|
||
|
|
injectBrandFont();
|
||
|
|
} else {
|
||
|
|
document.addEventListener("DOMContentLoaded", injectBrandFont, { once: true });
|
||
|
|
}
|