/* ══════════════════════════════════════════════════════════════════════ KAMUI SCHRIFTEN: die Dateien tatsaechlich einbinden ══════════════════════════════════════════════════════════════════════ BEFUND Im Browser gemessen (index.html, 1440 Pixel): document.fonts ............ leer body font-family .......... system-ui, sans-serif Absatz font-family ........ system-ui, sans-serif Es war KEINE einzige Schrift geladen. Das Theme verweist auf "Nunito Sans" und "Lato" ueber die Variablen --text-font-family und --heading-font-family, aber eine @font-face-Regel dafuer gibt es nirgends: im Theme-CSS stehen nur dashicons und themify. Folge: der Browser nimmt fuer jeden Schnitt, was das System gerade hat. Ein Buchstabe kommt aus dem einen Systemschnitt, der naechste aus einem anderen. Genau das war im Hero zu sehen - "Großes entsteht im Kleinen" mit fetten und duennen Buchstaben im selben Wort. Das war kein Stilmittel und kein Fehler in der Textfarbe, sondern eine fehlende Schriftdatei. VORHANDEN in _schriften/ (alles woff2, alles latin): cinzel-v23-latin-regular Cinzel 400 cinzel-v26-latin-700 Cinzel 700 lato-v24-latin-300 Lato 300 lato-v24-latin-regular Lato 400 lato-v24-latin-700 Lato 700 nunito-sans-v19-latin-regular Nunito Sans 400 nunito-sans-v18-latin-700 Nunito Sans 700 font-display: swap - der Text erscheint sofort im Systemschnitt und wird ausgetauscht, sobald die Datei da ist. Ohne das bliebe der Hero fuer einen Moment leer, und der Hero ist das Erste, was man sieht. */ /* ── Lato: der Fliesstext der Marke ────────────────────────────────── Drei Schnitte vorhanden, also die Schrift mit der feinsten Abstufung. Sachlich, ruhig, gut lesbar auf dunklem Grund. */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../_schriften/lato-v24-latin-300.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../_schriften/lato-v24-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../_schriften/lato-v24-latin-700.woff2") format("woff2"); } /* ── Nunito Sans: das Theme verweist darauf ───────────────────────── Eingebunden, damit die Theme-Variable nicht ins Leere zeigt. */ @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../_schriften/nunito-sans-v19-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../_schriften/nunito-sans-v18-latin-700.woff2") format("woff2"); } /* ── Cinzel: die Schrift der Wortmarke ────────────────────────────── Gehoert zum Logo, nicht in den Fliesstext. Eingebunden, weil das Theme sie an einzelnen Stellen aufruft. ACHTUNG: die Wortmarke KAMUI CONSULTING wird nie als HTML-Text in Cinzel nachgebaut, sondern immer aus der Bilddatei geschnitten. Ein Nachbau trifft weder Sperrung noch Strichstaerke des Originals. */ /* GEMESSEN 26.08.: die Hero-Ueberschriften der Angebotsseiten sprangen beim Laden in der Breite (507 -> 489 -> 497px bei gleichem Schriftgrad), waehrend document.fonts von "loading" auf "loaded" wechselte. Das ist ein sichtbarer Schriftwechsel: erst Ersatzschrift, dann Cinzel. Ursache war NICHT diese Datei, sondern die zweite Cinzel-Quelle des FastPixel-Systems ("fpo cinzel", base64 im ) - die traegt gar kein font-display, also blockt Chrome nur die Standardfrist und tauscht danach sichtbar um. Deshalb hier "block" statt "swap": lieber gar kein Text fuer den Bruchteil einer Sekunde als ein sichtbarer Sprung. Zusammen mit dem Preload (siehe werkzeuge/schrift_vorladen.py) ist die Datei da, bevor die Blockfrist ueberhaupt ablaeuft. Gilt nur fuer den Regelschnitt - der wird in den Ueberschriften benutzt. 700 bleibt auf "swap", er taucht nur in Fliesstext auf. */ @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400; font-display: block; src: url("../_schriften/cinzel-v23-latin-regular.woff2") format("woff2"); } @font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; /* 27.08.: von "swap" auf "block". Der Schnitt steht doch ueber dem Falz - auf der Team-Seite in "WARUM ES UNS GIBT". Mit "swap" zeigte der Browser erst die Ersatzschrift und tauschte dann; gemessen ruckten die beiden zentrierten Kopfzeilen dabei um 2 bis 9 px in der Breite. Vorgeladen wird er ohnehin (siehe die Preload-Zeile im Kopf jeder Seite), die Blockierzeit ist damit praktisch null. */ font-display: block; src: url("../_schriften/cinzel-v26-latin-700.woff2") format("woff2"); } /* ── Cormorant Garamond Kursiv ──────────────────────────────────────── Franky, 25.08.: "Ihr System muss geschwungeneres Kursiv sein." Bis dahin gab es keinen einzigen Kursivschnitt im Haus. Die Neigung wurde per skewX(-9deg) gefaelscht: aufrechte Lato-Buchstaben schraeg gestellt, keine einzige geschwungene Form darin. Genau das war gemeint - eine echte Kursive hat andere Buchstabenformen, nicht nur einen anderen Winkel. Cormorant Garamond Italic bringt die Schwuenge mit (einstoeckiges a, auslaufende Schwaenze an f und y) und steht als Renaissance-Antiqua in derselben Familie wie Cinzel, das die Marke ohnehin traegt. Nur der Kursivschnitt wird geladen, aufrecht kommt sie nie vor. */ @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../_schriften/cormorant-garamond-v21-latin-500italic.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 600; font-display: swap; src: url("../_schriften/cormorant-garamond-v21-latin-600italic.woff2") format("woff2"); } /* ── Inter: die Schrift im Hero ─────────────────────────────────────── Franky, 25.08., mit Screenshot einer Instagram-Kachel: "bitte nutze diesen Font in der Hero Sektion." Auf der Vorlage steht eine neutrale, eng laufende Grotesk. Lato, das der Rest der Seite traegt, ist humanistisch: weichere Formen, schmalere Versalien, das geneigte t. Nebeneinander gelegt ist der Unterschied deutlich, deshalb reicht kein Gewichtswechsel. Inter ist die naechstliegende freie Entsprechung und fuer Bildschirm gezeichnet - genau der Fall hier, wo die Zeilen bei 2.9rem ueber einer Fotoflaeche stehen. NUR IM HERO. Der Rest der Seite bleibt auf Lato, siehe hero.css und den h1-Block in v2-baulig.css - das sind die beiden einzigen Stellen, die Inter aufrufen. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../_schriften/inter-v20-latin-400.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../_schriften/inter-v20-latin-600.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../_schriften/inter-v20-latin-700.woff2") format("woff2"); } /* Der Baukasten ruft an manchen Stellen "fpo nunito" / "fpo lato" auf. Das sind Platzhalternamen ohne Datei. Wir legen sie als echte Schriftfamilien an, die auf die vorhandenen Dateien zeigen. */ @font-face { font-family: "fpo nunito"; src: url("../_schriften/nunito-sans-v15-latin-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "fpo nunito"; src: url("../_schriften/nunito-sans-v15-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "fpo nunito"; src: url("../_schriften/nunito-sans-v15-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "fpo lato"; src: url("../_schriften/lato-v24-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "fpo lato"; src: url("../_schriften/lato-v24-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ── Die Theme-Variablen auf die echten Namen setzen ──────────────── Damit greift die Einbindung auch dort, wo das Theme ueber Variablen arbeitet, statt nur an den Stellen, die Kamui selbst schreibt. Zusaetzlich: das Theme ruft an einigen Stellen "fpo lato" und "fpo nunito sans" auf. Das sind Platzhalternamen aus dem Baukasten ("fpo" = for placement only), zu denen es keine Datei gibt. Gemessen auf Leistungen und Arbeiten: die Ueberschriften landeten dadurch im Systemschnitt. Die Regeln unten fangen das ab. */ :root, body { --text-font-family: "Lato", system-ui, sans-serif; --heading-font-family: "Lato", system-ui, sans-serif; } body, p, li, td, input, textarea, select, button { font-family: "Lato", system-ui, sans-serif; } /* Ueberschriften: Lato 700. Gemessen standen sie auf Gewicht 400 und damit optisch gleichauf mit dem Fliesstext - die Seite hatte keine sichtbare Hierarchie. Franky will alles dick geschrieben. */ h1, h2, h3, h4, h5, h6, .brxe-heading, .brxe-heading * { font-family: "Lato", system-ui, sans-serif !important; font-weight: 700 !important; }