/* Self-hosted fonts — Inter + Plus Jakarta Sans (latin subset, variable, woff2). */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:optional;src:url('../fonts/inter-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:'Plus Jakarta Sans';font-style:normal;font-weight:500 800;font-display:swap;src:url('../fonts/plus-jakarta-sans-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} /* -------------------------------------------------------------------------- Inter (the body text) is font-display: OPTIONAL; Plus Jakarta Sans (headings) stays swap. 2026-09-29 live Lighthouse (mobile) measured CLS 0,104 on /tesouro-prefixado-2029/. Inter landed 5 ms before the first paint, after that frame had been laid out in the fallback, and the swap moved one "·" of the trust line from the end of its first line to the start of the second: a 365 px jump, which multiplied every box that moved a few px. The fallback below keeps BOXES the same size, but no size-adjust can promise the same LINE BREAKS for small, digit-heavy text — measured at 13 px, Inter's figures run 5–11% wider than the stretched Arial's (a line of the trust line: 373,3 px fallback, 376,7 px Inter, in a 376 px column). Only not swapping body text mid-read closes that whole class. With the preload in functions.php, Chrome holds the first paint up to ~100 ms for an optional font: on most connections the page paints in Inter from the start; on a slow first visit it stays in the matched fallback for that page, and every later page has Inter from the cache. Headings keep swap — their fallback matches to 0,03% and their lines are short (tests/theme/home-hero.test.mjs pins the hero; design-floor.test.mjs pins the first screen of seven templates with the webfonts held back 2,5 s). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- Metrics-matched fallbacks — the fix for the intermittent mobile CLS. `font-display: swap` means the page paints in a system font first and re-paints in the webfont when it lands. On a phone the homepage H1 is four words wide: Arial is ~6% narrower than Inter and ~1,4% narrower than Plus Jakarta Sans, and on a slow connection that was enough to make the headline wrap onto a different number of lines BEFORE the swap and re-wrap AFTER it. Everything below the headline moved — an intermittent 0,172 layout shift that the design never showed on a warm cache, which is exactly why it survived two design passes. These two faces are Arial, stretched to the webfont's own measurements so the pre-swap paragraph occupies the same box as the post-swap one: the swap then changes the SHAPE of the letters and nothing else. The numbers are MEASURED, not copied. `size-adjust` is the ratio of the webfont's advance width to Arial's for the same string, read in the browser at the H1's own size and tracking (scripts in the task's scratchpad; Plus Jakarta Sans 800 = 101,43% of Arial Bold, Inter 400 = 106,16% of Arial). The ascent/descent overrides are each font's own metrics divided by that same ratio, so scaling the glyphs does not also scale the line box: Plus Jakarta Sans ascent 1.038 descent 0.260 lineGap 0 ÷ 1.0143 → 102,34% / 25,63% / 0 Inter ascent 0.969 descent 0.242 lineGap 0 ÷ 1.0616 → 91,28% / 22,80% / 0 `local('Arial')` only: no download, and on a machine without Arial the face simply does not match and the stack falls through to the next family — the pre-swap paint is then no worse than it was before this block existed. -------------------------------------------------------------------------- */ /* ONE size-adjust PER WEIGHT BAND. Plus Jakarta Sans widens with weight much faster than Arial does, so the single 101,48% (tuned on the 800 H1) was 3,9% narrow at 500 and 1,9% WIDE at 600 — the weight of the tools' editable sentence (.oic-sent), whose pills then changed lines when the webfont landed (/simulador-renda-fixa/, CLS 0,0061 with the font held back 2,5 s). Each band is the ratio of the webfont's total advance to Arial's over the site's own 149 heading strings (2026-09-29): 500 → 105,45% of Arial; 600 → 99,60%, 700 → 100,42% of Arial Bold; 800 keeps the H1's own measurement. Ascent/descent follow the same rule as above (1.038 and 0.260 ÷ ratio). */ @font-face{ font-family:'Plus Jakarta Sans Fallback'; font-style:normal; font-weight:500 550; src:local('Arial'); size-adjust:105.45%; ascent-override:98.43%; descent-override:24.66%; line-gap-override:0%; } /* The BOLD bands are not optional and not cosmetic. A single Arial face declared across 500–800 tells the browser it already IS the bold, so at the H1's weight 800 it drew Arial REGULAR — measured 342 px against the webfont's 361 px, i.e. a "metrics-matched" fallback that was 5% narrower than the font it stands in for, which is worse than no fallback at all. Pointing the heavy weights at the real Arial Bold face is what closes it. */ @font-face{ font-family:'Plus Jakarta Sans Fallback'; font-style:normal; font-weight:600 650; src:local('Arial Bold'), local('Arial-BoldMT'), local('ArialMT'), local('Arial'); size-adjust:99.60%; ascent-override:104.22%; descent-override:26.10%; line-gap-override:0%; } @font-face{ font-family:'Plus Jakarta Sans Fallback'; font-style:normal; font-weight:651 750; src:local('Arial Bold'), local('Arial-BoldMT'), local('ArialMT'), local('Arial'); size-adjust:100.42%; ascent-override:103.37%; descent-override:25.89%; line-gap-override:0%; } @font-face{ font-family:'Plus Jakarta Sans Fallback'; font-style:normal; font-weight:751 800; src:local('Arial Bold'), local('Arial-BoldMT'), local('ArialMT'), local('Arial'); size-adjust:101.48%; ascent-override:102.29%; descent-override:25.62%; line-gap-override:0%; } @font-face{ font-family:'Inter Fallback'; font-style:normal; font-weight:400 550; src:local('Arial'); size-adjust:106.16%; ascent-override:91.28%; descent-override:22.80%; line-gap-override:0%; } @font-face{ font-family:'Inter Fallback'; font-style:normal; font-weight:600 800; src:local('Arial Bold'), local('Arial-BoldMT'), local('ArialMT'), local('Arial'); size-adjust:106.16%; ascent-override:91.28%; descent-override:22.80%; line-gap-override:0%; } /* -------------------------------------------------------------------------- What these faces do NOT fix, measured rather than assumed. The homepage still shows an intermittent 0,172 shift on a cold mobile load (5 runs of tests/theme/home-hero.test.mjs: 4 green, 1 red; 10 instrumented loads: 5 shifts, all identical). PerformanceObserver names the nodes: everything under the hero headline moves 38 px — exactly one line — when the swap lands late. It is not the prose. With these faces the headline's own text measures 360,63 px against the webfont's 360,52 px, a 0,03% difference. It is the hero's sentence PILLS: ``s whose width is written in px by autosize() from a measurement taken in whatever font is active at the time. The two fonts disagree about figures far more than about letters — at the pill's own weight and tabular-nums setting, a digit is 0,5903 em in Plus Jakarta Sans against 0,5482 em in Arial, and the separators are 0,3681/0,3472 em against 0,272 em for both — so the pill is measured 128 px before the swap and 116 px after it, and the sentence re-wraps. A per-glyph face (digits and separators scaled by their own ratios) was tried and REVERTED: the ratios differ per glyph, per weight and between tabular and proportional figures, so one size-adjust cannot hold them, and a wrong one makes the box worse than plain Arial. The two fixes that would actually close it both belong to the hero, not to a font declaration: reserve the sentence's height at each breakpoint (the idiom the design pass already uses for the answer cards), or size the pills in a unit that does not depend on the font being loaded. -------------------------------------------------------------------------- */