/* =============================================================================
LeadShield Font Loader
-----------------------------------------------------------------------------
Studio (Light) : Space Grotesk (Display) + Inter (Body) + DM Mono (Labels)
Filter (Dark) : Syne (Display) + Inter (Body) + DM Mono (Labels)
[+ Space Grotesk als Fallback / Bridge]
STRATEGIE
---------
v1 : bunny.net Fonts via @import — DSGVO-konform, EU-gehostet, kein
Consent nötig, Drop-in-Replacement für Google Fonts (identische API).
v2 : self-hosted woff2 via @font-face (siehe Block am Dateiende, kommentiert)
KRITISCHE GEWICHTE (preload empfohlen — Tags in HTML einsetzen)
----------------------------------------------------------------------
Space Grotesk 700, 800 — H1/H2/Display
Inter 400, 500 — Body, Lead
DM Mono 400, 500 — Labels, Microcopy, Section-Numbers
Syne 600, 800 — nur /filter Hero (Dark-Side)
============================================================================= */
/* -----------------------------------------------------------------------------
1. bunny.net Fonts Combined Import (v1 — DSGVO-konform)
Eine URL → ein Roundtrip. font-display=swap verhindert FOIT.
bunny.net ist ein DSGVO-konformer Mirror für Google Fonts. Gleiche URL-API.
--------------------------------------------------------------------------- */
@import url('https://fonts.bunny.net/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&display=swap');
/* -----------------------------------------------------------------------------
2. Preload-Hints für HTML
Diese Tags sind bereits in jedem index.html gesetzt:
Wenn auf self-hosted gewechselt wird, stattdessen:
Hero-spezifische Subpages laden zusätzlich:
/filter → syne-700.woff2 + syne-800.woff2
--------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
3. Body-Default + Feature-Settings
Liga + kerning + tabular numerals für Pricing/Stats. Side-agnostic.
--------------------------------------------------------------------------- */
html {
font-family: var(--font-body);
font-feature-settings:
"kern" 1,
"liga" 1,
"calt" 1,
"ss01" 1; /* Inter: alternate "a" / "g" — moderner B2B-Charakter */
font-variant-numeric: lining-nums proportional-nums;
}
/* Stat-Counter / Pricing / Tabellen-Werte → tabellarische Ziffern */
.tabular,
[data-numeric="tabular"] {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: "tnum" 1, "kern" 1;
}
/* Display / Headlines → tightere Kerning + Discretionary Ligatures */
h1, h2,
.display,
.h-display {
font-family: var(--font-display);
font-weight: var(--fw-black);
letter-spacing: var(--ls-tight);
line-height: var(--lh-tight);
font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
}
h3, h4,
.h-section {
font-family: var(--font-display);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-snug);
line-height: var(--lh-snug);
}
/* Mono-Labels: uppercase, wider tracking, kein liga */
.label,
.mono,
.section-num,
[data-mono] {
font-family: var(--font-mono);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-wider);
text-transform: uppercase;
font-feature-settings: "kern" 1;
}
/* Dark-Side override: Hero-Display nutzt Syne */
[data-theme="dark"] h1,
[data-theme="dark"] .display,
[data-theme="dark"] .h-display {
font-family: var(--font-display-dark);
}
/* -----------------------------------------------------------------------------
4. SELF-HOSTED Migration (v2 — derzeit auskommentiert)
-----------------------------------------------------------------------------
Wenn Performance / DSGVO einen Wechsel auf self-hosting verlangt:
1. woff2-Dateien nach /fonts/ legen
2. Block unten auskommentieren
3. @import-Zeile in §1 löschen
4. Preload-Tags in HTML einfügen (siehe §2)
--------------------------------------------------------------------------- */
/*
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/fonts/space-grotesk-var.woff2') format('woff2-variations'),
url('/fonts/space-grotesk-var.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('/fonts/inter-var.woff2') format('woff2-variations'),
url('/fonts/inter-var.woff2') format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
font-family: 'DM Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('/fonts/dm-mono-500.woff2') format('woff2');
}
@font-face {
font-family: 'Syne';
font-style: normal;
font-weight: 600 800;
font-display: swap;
src: url('/fonts/syne-var.woff2') format('woff2-variations'),
url('/fonts/syne-var.woff2') format('woff2');
}
*/