/* ============================================================================ fonts-premium.css — the storefront's web fonts, site-wide (2026-09-27) ---------------------------------------------------------------------------- Linked from layouts/layout-both-columns.tpl and layouts/layout-error.tpl, before theme-premium.css. It holds @font-face rules and one font-family correction; nothing else belongs here. What was wrong (measured on home, category, product, cart, login, about, contact): - Inter: the theme's SCSS imports only `@fontsource/inter/index.css`, i.e. weight 400. ~500 text runs per page ask for 600 or 700 (card names, buttons, prices, nav), so the browser faked every one of them by smearing the 400 outlines. - Playfair Display (the heading face) was declared only in product-premium.css and account-premium.css. The homepage, listings, cart and checkout never loaded it, so the same heading style changed typeface from page to page (Georgia/serif fallback on those pages). - The homepage "Where Quality Speaks" block asked for Poppins, which this site never loads — visitors got their system font there (Arial on Windows) inside an otherwise Inter page. ========================================================================== */ /* ---- Inter 600 / 700 ----------------------------------------------------- @fontsource/inter 5.1.0 — the exact build the theme's 400 files come from: the npm tarball's sha512 equals themes/hummingbird/package-lock.json, and its 400 woff2 files are byte-identical to the ones theme.css already serves, so regular and bold text are the same design version. Licence: SIL OFL 1.1 (assets/fonts/inter-OFL-LICENSE.txt). Only 600 and 700 are added — the weights that were being faked. ~30 labels ask for 500; with no 500 face they keep rendering at 400, exactly as today. A 650 request resolves to 700. latin-ext carries the rupee sign (U+20B9), so a bold price loads it; unicode-range keeps every other page from paying for it. `swap`: text shows at once in the fallback and re-renders when ready. */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-600-normal.woff2) format('woff2'); 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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/inter-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-700-normal.woff2) format('woff2'); 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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/inter-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Playfair Display, on every page ------------------------------------- Same files and descriptors as the copies in product-premium.css and account-premium.css (variable, 400-900). Those copies can stay: a second identical @font-face points at the same URL and is fetched once. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/playfair-display-latin-normal.woff2) format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/playfair-display-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/playfair-display-latin-italic.woff2) format('woff2'); 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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url(../fonts/playfair-display-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Poppins -> Inter ----------------------------------------------------- theme.css sets `font-family: 'Poppins', sans-serif` on these two homepage blocks and nothing loads Poppins, so they rendered in whatever sans-serif the visitor's system has. The site's UI face is Inter; headings inside keep their own Playfair rules. Same specificity as theme.css's rule, and this file loads after it. */ .semsons-section, .semsons-cards { font-family: var(--bs-body-font-family, 'Inter', sans-serif); } /* ---- Consequences of the real heading face -------------------------------- Playfair is wider than the Georgia fallback the homepage, listings and cart were showing, so a few headings that used to fit now wrap — and broke badly: "Engineered In-" / "House" (trust band, ~1440px), "…fits your" / "bench?" (closing call to action, 768px), "…and special" / "sales" (footer newsletter, 768px), "…jewellery" / "engineering." (homepage subtitle, 1024px). These are the blocks a width sweep (360-1440px) flagged. Balanced wrapping evens the lines instead; single-line text is untouched, and browsers without `text-wrap` keep the plain break. */ .sk-trust__title, .sk-cta__title, .semsons-section .subtitle, .email-subscription__label { text-wrap: balance; }