/* ===================================================================== EvoTechnik — SELF-HOSTED WEBFONTS Layer 0 · Sprint 10B · 17 August 2026 · closes OPEN-6 Loads BEFORE tokens.css. Nothing here defines a colour, a size or a token — only @font-face. tokens.css still owns --font-heading and --font-body, and every rule in the site keeps using those. --------------------------------------------------------------------- WHY SELF-HOSTED RATHER THAN THE GOOGLE CDN 1. PRIVACY. The CDN sends every visitor's IP address to Google on every page load, before the visitor has agreed to anything. The privacy policy claims to list the third parties this site shares data with; removing the sharing is simpler and more honest than documenting it. 2. NO THIRD-PARTY DEPENDENCY. If fonts.gstatic.com is slow, blocked or unreachable, the site still renders in its real typefaces. That is not hypothetical on Indian mobile networks. 3. FEWER CONNECTIONS. The CDN needs DNS + TLS to two extra origins (fonts.googleapis.com for the CSS, then fonts.gstatic.com for the files) before the first byte of a font arrives. Self-hosted, the files come from a connection that is already open. 4. A TIGHTER CSP. With no external font origins, style-src and font-src are both plain 'self'. The cost is 228 KB of files in the repo and a manual refresh if the client ever wants a different weight. Both are cheap. --------------------------------------------------------------------- ARCHIVO IS A VARIABLE FONT Google serves ONE file per subset covering the whole 500-900 range — the five weight URLs in its CSS are byte-identical (verified by md5). Declaring the range once, rather than five static faces, saves about 140 KB and four requests. `font-weight: 500 900` is the variable-range syntax; browsers without variable-font support fall back to the nearest static instance, which for this file is the whole point. Barlow is NOT variable — its weights are genuinely different files, so each is declared separately. --------------------------------------------------------------------- WHY latin-ext IS INCLUDED AND NOT TRIMMED AWAY THE RUPEE SIGN LIVES THERE. U+20B9 falls inside latin-ext's U+20AD-20C0 range, not in latin. Ship latin alone and every price on this site loses its ₹ glyph to a fallback font. The vietnamese subset IS dropped — there is no Vietnamese content. unicode-range means these files are LAZY: a browser downloads latin-ext only when the page actually contains a character from it. Including it costs nothing on a page that has no rupee sign. --------------------------------------------------------------------- font-display: swap on every face — text paints immediately in the fallback and re-renders when the webfont lands. Never invisible text. ===================================================================== */ /* --------------------------------------------------------------------- ARCHIVO — headings, wordmark, numerals. Variable, 500-900. --------------------------------------------------------------------- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-var-latin-ext.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: 'Archivo'; font-style: normal; font-weight: 500 900; font-stretch: 100%; font-display: swap; src: url('../fonts/archivo-var-latin.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; } /* --------------------------------------------------------------------- BARLOW — body copy. Static weights: 400, 500, 600, 700. --------------------------------------------------------------------- */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400-latin-ext.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: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/barlow-400-latin.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: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500-latin-ext.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: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/barlow-500-latin.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: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600-latin-ext.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: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/barlow-600-latin.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: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700-latin-ext.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: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/barlow-700-latin.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; }