/* * PER-ENVIRONMENT FONTS CSS -- TWO VARIANTS, KEEP IN SYNC * ------------------------------------------------------- * loveandlemonsfonts.css -> https://www.loveandlemons.com URLs (production) * loveandlemonsfonts-staging.css -> https://staging.loveandlemons.com URLs (staging) * * The variant is chosen at runtime via lnl_is_staging() (lnl-base functions-base.php) by * header.php, which prints the AND the matching font PRELOADs -- their URLs must * byte-match the src values below or the preloads are wasted and every face is fetched * TWICE. Nothing errors when they drift; the network tab is the only detector. * * GENERATED FILE -- DO NOT HAND-EDIT EITHER VARIANT. * Both are emitted by utils/fonts/write_fontcss.py from one FACES table; the font files * themselves come from utils/fonts/build_fonts.py. Edit those and re-run: * * python utils/fonts/build_fonts.py && python utils/fonts/write_fontcss.py * * WHY ABSOLUTE URLs (do NOT "clean up" to relative paths): an absolute url is the one * shape that is correct no matter what W3TC does with this sheet. W3TC's * Minify_CSS_UriRewriter SKIPS any url containing "//", so `https://...` is passed * through untouched whether the sheet is inlined or served as a file. A RELATIVE url * has no such guarantee: it only works if the rewriter runs on this sheet and rewrites * it from the source directory, and if the sheet is ever inlined without that rewrite * it resolves against the PAGE url and 404s differently on every page. * (Rule: Jack, 2026-07-18, who states this sheet is not minified. Mechanism rewritten * 2026-09-09: the earlier text said css is "combined into bundles served from a * different path", which is what happens to JS, not css -- and note that * w3tc-config/master.php's minify.reject.files.css lists only the two retired H&Co * kits, not this file, so treat the exclusion as unconfirmed in the repo. It does not * matter: absolute is right either way. See w3tc-notes.md section 20 and gotchas.md.) * * THE TYPE STACK (replaced the H&Co set 2026-08-25) * ------------------------------------------------ * All three families are SIL Open Font License -- self-hosted, no metered pageviews, no * per-domain scoping. That retired the H&Co licensing burden entirely. * * Zilla Slab (Typotheque/Mozilla) body copy, recipe card titles, footer links * Oswald (Vernon Adams) buttons, labels, form fields, callout headings * Tilt Warp (Andy Clymer) section headers and page titles * * >>> SOME FAMILIES ARE DECLARED HEAVIER THAN THEY REALLY ARE <<< * --------------------------------------------------------------------- * READ THIS BEFORE BELIEVING ANY WEIGHT NUMBER BELOW. These families declare a * weight ABOVE the file's real usWeightClass, so every `font-weight` the theme * asks for resolves one step LIGHTER -- no theme CSS was edited: * * Zilla Slab +100 * * WHY: Trina's note on the 8.24.26 comp round -- one font weight lower for body * copy to look less chunky. ADOPTED AND SHIPPED 2026-09-09 (Jack): this is the * design now, not an experiment, and it goes to production in this form rather * than by rewriting the theme's ~150 font-weight declarations (114 of which are * the bare keyword `bold`). * * WHAT THAT COSTS YOU, THE READER: for these families a weight number in the theme * does NOT name the face it gets. For Zilla Slab, 600 is Medium, 700 is SemiBold, * `bold` is SemiBold and 400 is Light. Write new rules against THAT, and say so at * the call site. Families absent from the list above mean exactly what they say. * * The clean end state is still to move those numbers into the theme and set the * shift back to 0; that is deferred, not forgotten. Toggle: WEIGHT_SHIFT in * utils/fonts/write_fontcss.py, then re-run the script. * * Everything below describes the UNSHIFTED design and still holds for the rest. * * STOCK METRICS, REAL WEIGHTS (the 2026-08-26 reset) * ------------------------------------------------- * EVERY WEIGHT DECLARED BELOW IS THE FONT'S OWN usWeightClass. Until 2026-08-26 they were * role-mapped slots carried over from Archer/Gotham -- Light declared 400, SemiBold 700, * Bold 800 -- so `font-weight: bold` rendered SemiBold and 400 rendered Light. That is * gone. The generator asserts every declared number against the built file, so the table * cannot drift back. * * THERE ARE ALSO NO size-adjust OR METRIC OVERRIDES ANY MORE. Each family used to carry a * size-adjust (Zilla 110%, Oswald 94%, Tilt Warp 98%) plus ascent/descent/line-gap * overrides pinning it to H&Co's 1.200em box, so the new faces would match Archer's * apparent size and leading. All of it was tuning for fonts the site no longer uses, and * it was removed to give the new stack a clean baseline to be re-tuned from (Jack's call). * * Consequences, so nobody re-adds them by reflex: * - Zilla Slab renders ~9% smaller per em than it did; sizes were NOT compensated. * - Oswald renders ~6% larger, Tilt Warp ~2% larger. * - Oswald and Tilt Warp set USE_TYPO_METRICS, so their line box is now their own * (Oswald ~1.482em, not 1.200em). Anything driven by `line-height: normal` -- form * controls and buttons, where Oswald is the face -- is taller than it was. * * THE FULL FAMILIES ARE SHIPPED, not just what is used. Zilla Slab 300-700 with italics, * Oswald 200-700, Tilt Warp's single face. The theme CSS asks only for `normal`/`bold`, * so most of these are unreferenced today; that is deliberate, and pruning is a PRELOAD * decision (header.php) rather than a reason to delete a face. * * KNOWN, ACCEPTED GAPS * -------------------- * - Oswald ships NO italics -- none exist upstream. An inside an Oswald-set element * is synthesized by the browser. This still bites `.entry-content em` inside the Oswald * callout headings (body.css), which is cosmetic and accepted. * - Tilt Warp has NO WEIGHT AXIS AT ALL: its upstream variable font carries only XROT and * YROT, so 400 is the only weight that can ever exist. Every Tilt Warp rule in the theme * pins `font-weight: normal` for that reason -- asking it for bold only gets faux-bold. * * ENCODING (see loveandlemons6-fontanalysis.md section 7 for the measured ladder) * ------------------------------------------------------------------------------ * Sourced from google/fonts, subset to `latin` + `latin-ext`, hinting KEPT (Jack's call), * glyph names and DSIG dropped, DEFAULT layout features only -- passing every feature * keeps ~500 alternate glyphs no character can reach and inflates Zilla Slab by ~39%. * Oswald and Tilt Warp are variable upstream and are INSTANCED before subsetting; for * Tilt Warp that removes the XROT/YROT rotation deltas, which are 70% of the raw file. * * FILE LAYOUT: fonts/{woff2,woff}/{Face}.{ext} -- flat. lnl_font_preload_links() takes * theme-relative PATHS rather than bare face names so each child lays fonts out its own way. */ @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-Light.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-Light.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-LightItalic.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-LightItalic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-Regular.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-Regular.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-Italic.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-Italic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-Medium.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-Medium.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-MediumItalic.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-MediumItalic.woff') format('woff'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-SemiBold.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-SemiBold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-SemiBoldItalic.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-SemiBoldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-Bold.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-Bold.woff') format('woff'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/ZillaSlab-BoldItalic.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/ZillaSlab-BoldItalic.woff') format('woff'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Oswald'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/Oswald-ExtraLight.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/Oswald-ExtraLight.woff') format('woff'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/Oswald-Light.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/Oswald-Light.woff') format('woff'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/Oswald-Regular.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/Oswald-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/Oswald-Medium.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/Oswald-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/Oswald-SemiBold.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/Oswald-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/Oswald-Bold.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/Oswald-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Tilt Warp'; src:url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff2/TiltWarp-Regular.woff2') format('woff2'), url('https://www.loveandlemons.com/wp-content/themes/loveandlemons6/fonts/woff/TiltWarp-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }