/* ========================================================= FONT LAB — FONTS ONLY (no sizing / weight / spacing) Toggle via: … f12 Purpose: swap font-family only ========================================================= */ /* ---------- defaults (fallbacks) ---------- */ :root{ --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; } /* ---------- apply globally (family only) ---------- */ body{ font-family: var(--font-body); } h1,h2,h3,h4,h5,h6{ font-family: var(--font-ui); } /* ========================================================= PROFILES — ONLY SET --font-ui / --font-body ========================================================= */ /* F1 — Nunito Sans */ html[data-font="f1"]{ --font-ui: "Nunito Sans", system-ui, sans-serif; --font-body: "Nunito Sans", system-ui, sans-serif; } /* F2 — TikTok Sans */ html[data-font="f2"]{ --font-ui: "TikTok Sans", system-ui, sans-serif; --font-body: "TikTok Sans", system-ui, sans-serif; } /* F3 — Zalando Expanded (UI) + SemiExpanded (Body) */ html[data-font="f3"]{ --font-ui: "Zalando Sans Expanded", system-ui, sans-serif; --font-body: "Zalando Sans SemiExpanded", system-ui, sans-serif; } /* F4 — Zalando SemiExpanded */ html[data-font="f4"]{ --font-ui: "Zalando Sans SemiExpanded", system-ui, sans-serif; --font-body: "Zalando Sans SemiExpanded", system-ui, sans-serif; } /* F5 — Vend Sans */ html[data-font="f5"]{ --font-ui: "Vend Sans", system-ui, sans-serif; --font-body: "Vend Sans", system-ui, sans-serif; } /* F6 — Red Hat Display (UI) + Nunito body */ html[data-font="f6"]{ --font-ui: "Red Hat Display", system-ui, sans-serif; --font-body: "Nunito Sans", system-ui, sans-serif; } /* F7 — Inter */ html[data-font="f7"]{ --font-ui: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; } /* F8 — DM Sans */ html[data-font="f8"]{ --font-ui: "DM Sans", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif; } /* F9 — Plus Jakarta Sans */ html[data-font="f9"]{ --font-ui: "Plus Jakarta Sans", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", system-ui, sans-serif; } /* F10 — Space Grotesk */ html[data-font="f10"]{ --font-ui: "Space Grotesk", system-ui, sans-serif; --font-body: "Space Grotesk", system-ui, sans-serif; } /* F11 — Fraunces headings + Inter body */ html[data-font="f11"]{ --font-ui: "Fraunces", ui-serif, Georgia, serif; --font-body: "Inter", system-ui, sans-serif; } /* F12 — Fraunces headings + DM Sans body */ html[data-font="f12"]{ --font-ui: "Fraunces", ui-serif, Georgia, serif; --font-body: "DM Sans", system-ui, sans-serif; }