/* ============================================================================= FACTORY INVESTIGATOR — Self-Hosted Web Fonts · fonts.css · v1.0 Date: 2026-05-31 ----------------------------------------------------------------------------- Served as its OWN stylesheet from /wp-content/fonts/fonts.css and enqueued by SNIPPET 1 in factory-investigator-snippets.php. Kept separate from the main Customizer stylesheet (factory-investigator.css) so font delivery can be versioned / cache-busted / swapped independently — the same split ivristech uses (ivris-fonts.css vs. the Customizer file). WHY SELF-HOST (the HTML samples used the Google Fonts CDN — production does not): • Kills a third-party critical-path connection (DNS + TLS + preconnect to fonts.gstatic.com) → faster LCP, and the bytes now ride our own LiteSpeed + Cloudflare cache instead of bypassing it. • GDPR: no visitor IP is handed to Google — relevant for EU manufacturer traffic and for an "independent" publication's privacy posture. • Deterministic: the font version can't change underneath us. THE STACK (locked in factory-investigator-design-direction.md §Q2): Fraunces display · headings · wordmark · stat numerals VARIABLE Source Serif 4 article reading body + lede VARIABLE DM Sans UI: nav · buttons · forms · captions · service VARIABLE IBM Plex Mono field-notes: labels · metadata · table data · $ STATIC (*) (*) IBM Plex Mono ships NO variable font — the IBM Plex project distributes static cuts only. The design uses exactly three weights (400/500/600), so we self-host those three static WOFF2 files. This is a deliberate, correct deviation from the spec's "IBM Plex Mono (variable)" wording. See fonts/README.md → "Known font-source limitations". DELIVERY STRATEGY: • font-display:swap — text paints instantly in the metric-matched fallback (the CLS-fix @font-face block at the TOP of factory-investigator.css makes Arial/Georgia occupy the same box), then swaps to the real face with ZERO layout shift. Never FOIT, never CLS. • One variable file per family covers every weight we use, so the whole brand is 3 roman files + 1 Fraunces-italic + 3 mono statics = 7 requests, cached hard and preloaded for the two above-the-fold critical cuts (see Snippet 1). UNICODE SUBSET: unicode-range below is Google's "latin" partition. These files must be the LATIN-SUBSET WOFF2 (see fonts/README.md for how to get pre-subset files from Fontsource) — that is where the real byte savings live; unicode-range only tells the browser WHEN to use the face. Symbol glyphs used in the UI (✓ → ↗ ✦ ·) are intentionally NOT in these files and fall back to the system font; they don't need to be brand-consistent. ============================================================================= */ /* The Latin partition, declared once here for reference; repeated inline per @font-face (CSS requires it on each). Keep all four families on the SAME range so the browser makes one coherent download decision. */ /* LATIN = U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD */ /* ---------------------------------------------------------------------------- FRAUNCES — variable, weight 100–900, optical-size axis 9–144. opsz is applied automatically by the browser because the main stylesheet sets `font-optical-sizing:auto` on headings; we do NOT pin opsz here, so big display cuts get high contrast and small cuts stay sturdy — for free. ---------------------------------------------------------------------------- */ @font-face { font-family: "Fraunces"; src: url("/wp-content/fonts/fraunces-latin-variable.woff2") format("woff2"); font-weight: 100 900; /* full variable range in ONE file */ font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Italic — used by the pull-quote (Fraunces italic 500) and the homepage interview question. Separate file because italic is a distinct outline set. */ @font-face { font-family: "Fraunces"; src: url("/wp-content/fonts/fraunces-latin-italic-variable.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------------------------------------------------------------------------- SOURCE SERIF 4 — variable, weight 200–900, optical-size axis 8–60. Article reading body + lede only. Roman is enough: the design never sets Source Serif italic (emphasis inside body copy is rare and acceptable as the browser's synthesized oblique). Omitting the italic file saves a request. ---------------------------------------------------------------------------- */ @font-face { font-family: "Source Serif 4"; src: url("/wp-content/fonts/source-serif-4-latin-variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------------------------------------------------------------------------- DM SANS — variable, weight 100–1000, optical-size axis 9–40. UI face: nav, buttons, form controls, captions, service-page body. Roman only (no DM Sans italic anywhere in the design system). ---------------------------------------------------------------------------- */ @font-face { font-family: "DM Sans"; src: url("/wp-content/fonts/dm-sans-latin-variable.woff2") format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---------------------------------------------------------------------------- IBM PLEX MONO — STATIC cuts (no variable font exists; see header note). Three weights, matching the design's usage: 400 table data, sidenotes, sources, "VOL. 2 · 2026" issue line 500 byline / metadata rows 600 category labels, status badges, table headers, block labels No italic cut is used by the design. ---------------------------------------------------------------------------- */ @font-face { font-family: "IBM Plex Mono"; src: url("/wp-content/fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("/wp-content/fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: "IBM Plex Mono"; src: url("/wp-content/fonts/ibm-plex-mono-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ============================================================================= END fonts.css — 7 files total: fraunces-latin-variable.woff2 (preload — critical) fraunces-latin-italic-variable.woff2 source-serif-4-latin-variable.woff2 (preload — critical) dm-sans-latin-variable.woff2 ibm-plex-mono-latin-400.woff2 ibm-plex-mono-latin-500.woff2 ibm-plex-mono-latin-600.woff2 (Preload links for the two critical cuts are emitted by Snippet 1.) ============================================================================= */