/* ============================================================
PIÙ VISION — Lokal gehostete Schriften (selbst gehostet)
Ersetzt die externe Google-Fonts-Einbindung.
Grund: DSGVO (keine Besucher-IP an Google) + Performance
(kein render-blockierender Fremd-Request).
Schnitte exakt wie zuvor über Google geladen:
Cormorant Garamond 300 / 400 (jeweils normal + italic)
Inter 300 / 400 / 500 (normal)
Subsets: latin + latin-ext → deckt „PIÙ" und ä/ö/ü/ß ab.
Dateien: ../fonts/*.woff2
── LADE-PRIORITÄT (Tier 1 vs. Tier 2) ──────────────────────
Schriften lädt der Browser ohnehin "lazy": ein Schnitt wird erst
heruntergeladen, wenn tatsächlich Text damit gerendert wird.
Steuerbar ist nur die PRIORITÄT:
• Tier 1 = im ersten Viewport sichtbar → im jeder Seite
per vorgezogen (laden zuerst, hohe Prio),
in Auftreten-Reihenfolge:
Inter 500 (Nav-Links + Hero-Eyebrow)
Cormorant Garamond 300 (Hero-Headline = LCP-Element)
Inter 300 (Hero-Tagline + Body-Standard)
→ schwappen gemeinsam um → kein gestaffeltes Nachrücken.
• Tier 2 = kommt erst weiter unten vor → KEIN Preload, lädt
on-demand nach (= die natürliche "Lazy"-Variante für Fonts).
Die Reihenfolge der @font-face-Blöcke unten spiegelt die Tiers;
die eigentliche Priorisierung macht aber der Preload im .
ZURÜCK ZU GOOGLE FONTS: in jeder *.html im die Zeile
entfernen und den darunter auskommentierten Google-Block wieder
einkommentieren. Zusätzlich in allen *.html die drei
-Zeilen entfernen. (Diese Datei
+ der Ordner fonts/ können dann liegen bleiben oder weg.)
============================================================ */
/* ════ TIER 1 — Above the fold (in index.html vorab geladen) ════ */
/* Inter 500 — Nav-Links + Hero-Eyebrow (erste sichtbare Schrift) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url('../fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}
/* Cormorant Garamond 300 — Hero-Headline (LCP-Element) */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-300.woff2') format('woff2');
}
/* Inter 300 — Hero-Tagline + Body-Standard (meistgenutzter Schnitt) */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url('../fonts/inter-v20-latin_latin-ext-300.woff2') format('woff2');
}
/* ════ TIER 2 — Erst weiter unten / on-demand (kein Preload) ════ */
/* Cormorant Garamond 400 (normal) — nicht im ersten Viewport */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2');
}
/* Cormorant Garamond 300 italic — nicht im ersten Viewport */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-300italic.woff2') format('woff2');
}
/* Cormorant Garamond 400 italic — nicht im ersten Viewport */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2');
}
/* Inter 400 (regular) — nicht im ersten Viewport */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}