/* ============================================================ Bconnect — lettertypen (Roc Grotesk, 9 gewichten) ------------------------------------------------------------ Algemene styling, sitewide geladen via functions.php. Paden zijn relatief vanaf de theme-root (../fonts/ vanuit deze map als die verplaatst wordt; hier staat fonts.css in de theme-root, dus fonts/ is direct bereikbaar). font-display: swap zodat tekst niet wacht op de fonts. ============================================================ */ @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* ------------------------------------------------------------ Gewichten 700-900 exact zoals de Claude Design-bron ze declareert (zie de @font-face-blokken in de standalone-export): 700 = Bold, 800 = ExtraBold, 850 = Heavy, 900 = Black. Er is BEWUST geen 600-face: font-weight:600 valt volgens de CSS- matching op de eerstvolgende zwaardere (700 = Bold) — precies wat de bron rendert. Hiervoor stond hier 600=Bold / 700=ExtraBold / 800=Heavy: elk gewicht één stap te zwaar, waardoor o.a. de homepage-H1 (800) als Heavy rendde en ~4% breder was dan in het ontwerp. ------------------------------------------------------------ */ @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-Heavy.woff2") format("woff2"); font-weight: 850; font-style: normal; font-display: swap; } @font-face { font-family: "Roc Grotesk"; src: url("fonts/RocGrotesk-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; } /* ============================================================ ALIAS "Bconnect" — dezelfde negen faces, tweede familienaam. ------------------------------------------------------------ De Elementor-kit zet alle vier de global-typography-slots (primary, secondary, text, accent) op "Bconnect", en er staan daarnaast tientallen harde `font-family:"Bconnect",Sans-serif` declaraties in de opgeslagen element-settings. Die naam bestaat alleen dankzij de Custom Fonts-plugin, die er zes .otf's uit wp-content/uploads/2023/03/ aan hangt met een ABSOLUTE URL naar het hoofddomein. Op de taaldomeinen is dat cross-origin en dus geblokkeerd, precies zoals hierboven bij de woff2 — maar die .otf's komen uit een plugin, niet uit dit bestand, en zijn daarmee buiten bereik van de Autoptimize-uitsluiting. Nagemeten met fontTools: die zes .otf zijn byte-voor-byte hetzelfde ontwerp als de woff2 hiernaast. Zelfde PostScript- namen, zelfde versiestring (1.000; hotconv 1.0.88), 485 glyphs en 446 codepoints in beide, identieke advance widths, en de volledige fr/de-set (é à ç ü ß œ €) zit in allebei. Er gaat dus niets verloren door "Bconnect" naar dezelfde bestanden te laten wijzen. Beide namen resolven hierna naar dezelfde faces: op NL verandert er niets, op de taaldomeinen krijgt alles wat "Bconnect" vraagt een same-origin bron. Bij gelijke family+weight+style wint de LAATST gedeclareerde @font-face, en dit bestand staat ruim ná het inline blok van de plugin (dat is de tweede style-tag in de head), dus dit hoort de .otf-download al te verdringen vóórdat de plugin wordt aangeraakt. NOG NIET GEDAAN, bewust: de "Bconnect"-entry in Custom Fonts verwijderen en de zes .otf uit de mediabibliotheek gooien. Dat raakt ook productie — waar bconnect-child nog niet draait en de .otf de ENIGE fontbron zijn — en vraagt eerst een meting in devtools dat er hierna geen Kostic-*.otf meer wordt opgehaald. ============================================================ */ @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-Thin.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-ExtraLight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } /* 700-900 exact zoals hierboven bij "Roc Grotesk": 700 = Bold, 800 = ExtraBold, 850 = Heavy, 900 = Black, en bewust geen 600. De plugin declareerde alleen t/m 700; de zwaardere gewichten zijn er hier dus bij, wat 800/900-instellingen in Elementor voortaan een echte face geeft in plaats van synthetisch vet. */ @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-Heavy.woff2") format("woff2"); font-weight: 850; font-style: normal; font-display: swap; } @font-face { font-family: "Bconnect"; src: url("fonts/RocGrotesk-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }