/* ===================================================================== THE ONE PLACE THE LATO STACK IS DEFINED --------------------------------------------------------------------- --bq-lato is the single source of truth for every plugin that renders Lato: bq-pages, bq-global-layout and bq-articles all resolve to this. Before this it was spelled out literally in six places across three plugins, which is how bq-articles ended up rendering a different 600 from bq-global-layout without anyone noticing. The two fallback families are metric-matched and never painted; see the blocks at the bottom of this file. Anything that needs the stack should say var(--bq-lato) - do not re-type the names. ===================================================================== */ :root { --bq-lato: 'Lato', 'Lato Fallback', 'Lato Fallback R', sans-serif; } /* ===================================================================== lato.css — the only font this site loads --------------------------------------------------------------------- SELF-HOSTED. Replaces the fonts.googleapis.com that twelve templates each carried, plus its two preconnects. Same origin now, so no third-party DNS + TLS before the first glyph. font-display:block, NOT swap. swap paints Arial first and exchanges it for Lato when it arrives, and Arial is nothing like Lato: measured on the live site with an identical string, Arial ran 6.7% wider at weight 700 and 26.8% wider and 8px taller at 900. Every swap therefore reflowed the page - that was the text CLS. block holds the text invisible until Lato is ready instead, so no other typeface is ever painted. The preloads in bq_pages_font_head() keep that window short. TEN FACES, TWENTY RULES. Google's Lato ships 100/300/400/700/900 in roman and italic and nothing else - fonts.googleapis.com answers HTTP 400 for wght@500, @600 and @800. Each face is split latin / latin-ext by unicode-range, which is what makes declaring the whole family cheap: a browser downloads only the subsets a page actually uses, so an all-English page fetches the latin files and ignores the rest. Ranges are Google's own, copied verbatim. Do not add 500, 600 or 800 rules to any stylesheet. Lato has no such faces; the browser resolves 500 to 400, 600 to 700 and 800 to 900, and a fallback font in the meantime SYNTHESISES them, which is the second half of the weight flash this file exists to remove. ===================================================================== */ @font-face { font-family: 'Lato'; font-style: italic; font-weight: 100; font-display: block; src: url('../fonts/lato-100-italic-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: 'Lato'; font-style: italic; font-weight: 100; font-display: block; src: url('../fonts/lato-100-italic-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: 'Lato'; font-style: normal; font-weight: 100; font-display: block; src: url('../fonts/lato-100-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: 'Lato'; font-style: normal; font-weight: 100; font-display: block; src: url('../fonts/lato-100-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: 'Lato'; font-style: italic; font-weight: 300; font-display: block; src: url('../fonts/lato-300-italic-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: 'Lato'; font-style: italic; font-weight: 300; font-display: block; src: url('../fonts/lato-300-italic-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: 'Lato'; font-style: normal; font-weight: 300; font-display: block; src: url('../fonts/lato-300-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: 'Lato'; font-style: normal; font-weight: 300; font-display: block; src: url('../fonts/lato-300-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: 'Lato'; font-style: italic; font-weight: 400; font-display: block; src: url('../fonts/lato-400-italic-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: 'Lato'; font-style: italic; font-weight: 400; font-display: block; src: url('../fonts/lato-400-italic-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: 'Lato'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/lato-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: 'Lato'; font-style: normal; font-weight: 400; font-display: block; src: url('../fonts/lato-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: 'Lato'; font-style: italic; font-weight: 700; font-display: block; src: url('../fonts/lato-700-italic-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: 'Lato'; font-style: italic; font-weight: 700; font-display: block; src: url('../fonts/lato-700-italic-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: 'Lato'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/lato-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; } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: block; src: url('../fonts/lato-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: 'Lato'; font-style: italic; font-weight: 900; font-display: block; src: url('../fonts/lato-900-italic-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: 'Lato'; font-style: italic; font-weight: 900; font-display: block; src: url('../fonts/lato-900-italic-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: 'Lato'; font-style: normal; font-weight: 900; font-display: block; src: url('../fonts/lato-900-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: 'Lato'; font-style: normal; font-weight: 900; font-display: block; src: url('../fonts/lato-900-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; } /* --------------------------------------------------------------------- SEMIBOLD (600) — the one face that does not come from Google. --------------------------------------------------------------------- Google's Lato has no Medium, SemiBold or Heavy; fonts.googleapis.com answers HTTP 400 for wght@500, @600 and @800. The foundry release does, and bq-global-layout has shipped Lato-Semibold for the app pages all along - so /stocks rendered a true Semibold at 600 while every page here silently resolved 600 up to Bold. Same design token, two different weights, decided by which plugin owned the URL. Copied from bq-global-layout/assets/fonts so both halves of the site agree. Not subsetted, hence no unicode-range: it is one file covering the full character set, exactly as bq-global-layout serves it. STILL NO 500 OR 800. There is no Lato Medium or Heavy file anywhere in this codebase, so those two remain rewritten to 400 and 900 in the stylesheets. Do not reintroduce them. No Semibold Italic exists either; a 600 italic resolves to 700 italic. --------------------------------------------------------------------- */ @font-face { font-family: 'Lato'; font-style: normal; font-weight: 600; font-display: block; src: url('../fonts/Lato-Semibold.woff2') format('woff2'), url('../fonts/Lato-Semibold.woff') format('woff'); } /* --------------------------------------------------------------------- 'Lato Fallback' — a metrically identical stand-in that is NEVER SEEN. --------------------------------------------------------------------- font-display:block stops the wrong typeface from being PAINTED, but it does not stop the page from MOVING. During the block period the browser still lays the invisible text out using whatever font comes next in the stack, and when Lato finally arrives the whole page re-flows to Lato's metrics. Measured on the harness with the font delayed six seconds, the block under a paragraph settled at three different heights before it came to rest - and with no fallback declared at all it was WORSE, because the browser fell back to its default serif, which is further from Lato than Arial is. So the invisible text has to be laid out in something that occupies exactly the space Lato will. That is what this is: Arial, re-scaled per weight so its advance widths and line box match Lato's to within 0.007% and 0px respectively. Nobody ever sees it - block keeps it invisible - it exists purely so the geometry is right before the real font lands. local('Arial') ALWAYS RESOLVES TO ARIAL REGULAR, whatever font-weight the rule declares: the declared weight is an exact match, so no synthetic bolding happens. Every size-adjust below is therefore calibrated against Arial Regular. Calibrating against Arial Bold, which is the obvious mistake, leaves 700 six percent narrow and 900 nineteen percent narrow. Numbers derived by measuring the real faces in the browser: size-adjust = Lato advance width / Arial Regular advance width ascent+descent = Lato line box / size-adjust, split 98.7 : 21.3, which is Lato's own hhea ratio (1974/-426 per 2000 em) Recalibrate the same way if the font files are ever changed. --------------------------------------------------------------------- */ @font-face{font-family:'Lato Fallback';src:local('Arial');font-weight:400;size-adjust:99.944%;ascent-override:98.76%;descent-override:21.31%;line-gap-override:0%;} @font-face{font-family:'Lato Fallback';src:local('Arial');font-weight:600;size-adjust:101.421%;ascent-override:98.13%;descent-override:21.18%;line-gap-override:0%;} @font-face{font-family:'Lato Fallback';src:local('Arial');font-weight:700;size-adjust:102.117%;ascent-override:96.65%;descent-override:20.86%;line-gap-override:0%;} @font-face{font-family:'Lato Fallback';src:local('Arial');font-weight:900;size-adjust:104.102%;ascent-override:94.81%;descent-override:20.46%;line-gap-override:0%;} /* --------------------------------------------------------------------- SECOND TIER: Roboto. Covers Android and Linux, where Arial does not exist. --------------------------------------------------------------------- src:local('Arial') simply FAILS on those platforms - the @font-face is unusable, the browser skips it and drops to whatever comes next, so all the calibration above is bypassed and the shift returns. Measured by pointing a face at a font name that does not exist: the error went from -0.01% / 0px to -4.62% / 5px. Android is not a rounding error in this site's traffic, so it gets its own calibrated tier. Roboto is Android's system font and ships on most Linux desktops. Values derived exactly as the Arial tier's were, against Roboto Regular, and verified to within 0.008% width and 0px line box. Order in the stack is Arial tier, then Roboto tier: whichever resolves first wins, and only one ever will on a given device. --------------------------------------------------------------------- */ @font-face{font-family:'Lato Fallback R';src:local('Roboto');font-weight:400;size-adjust:100.023%;ascent-override:98.68%;descent-override:21.30%;line-gap-override:0%;} @font-face{font-family:'Lato Fallback R';src:local('Roboto');font-weight:600;size-adjust:101.502%;ascent-override:98.05%;descent-override:21.16%;line-gap-override:0%;} @font-face{font-family:'Lato Fallback R';src:local('Roboto');font-weight:700;size-adjust:102.199%;ascent-override:96.58%;descent-override:20.84%;line-gap-override:0%;} @font-face{font-family:'Lato Fallback R';src:local('Roboto');font-weight:900;size-adjust:104.185%;ascent-override:94.74%;descent-override:20.44%;line-gap-override:0%;} /* --------------------------------------------------------------------- FORM CONTROLS DO NOT INHERIT font-family. THIS IS THE FIX FOR THAT. --------------------------------------------------------------------- button, input, select, textarea and optgroup are styled by the browser's own UA stylesheet, which hands them a system font - Arial on Windows - and normal inheritance does not override it. No rule anywhere was setting Arial; those controls simply never received Lato. Measured before this: every single bq-pages route rendered 4-5 elements in Arial - the mobile nav close button, the visit-popup close, and the Sign In / Create Account buttons. It is the most common way a site that "uses one font" quietly renders two, and it is invisible in a CSS audit because there is no declaration to find. Lives here, in the shared file, so bq-pages, bq-global-layout and bq-articles all get it from one rule. bq-api-docs does not load this file and carries the same fix scoped to .bq-api-body in its own fonts.css. inherit, not var(--bq-lato), on purpose: a control should take whatever its context uses, so this stays correct inside any container that deliberately sets a different family - bq-articles' serif panels, for instance - instead of forcing Lato into them. --------------------------------------------------------------------- */ button, input, optgroup, select, textarea { font-family: inherit; }