Webfont CLS Védelem & @font-face size-adjust Optimalizálás

Miért okoznak a webfontok drasztikus Cumulative Layout Shift (CLS) ugrálásokat?

A legtöbb weboldal egyedi webfontokat használ (pl. Google Fonts: Inter, Roboto, Montserrat). Amíg a webfont fájlja letöltődik a hálózatról, a böngésző egy alapértelmezett rendszerbetűtípust (pl. Arial, Times New Roman) jelenít meg. Amint az egyedi betűtípus megérkezik, a böngésző átvált (FOUT - Flash of Unstyled Text). Mivel azonban a két betűtípus karakterszélessége, sormagassága és betűköze eltér, a teljes szöveges bekezdés hirtelen több sorral lejjebb vagy feljebb rántja a gombokat és a képeket, ami tönkreteszi a CLS pontszámot.

• A látogató épp rákattintana egy gombra, de a betűtípus átváltás miatt a gomb elugrik a kurzor alól.
• A Google szigorúan bünteti a 0.1 feletti CLS értékeket a Core Web Vitals rangsorolásban.
• A font-display: swap önmagában nem oldja meg a méretkülönbségből fakadó ugrálást.

A modern CSS megoldás: @font-face size-adjust és font-metrika felülbírálás

A legújabb CSS szabványok lehetővé teszik a tartalék rendszerbetűtípus (Fallback Font) geometriájának tökéletes illesztését a végleges webfont méreteihez:

• `size-adjust`: A fallback betűtípus általános karakterméretének százalékos skálázása (pl. `size-adjust: 92%`), hogy a betűk pontosan azonos szélességet foglaljanak el.
• `ascent-override`: A betűk felfelé nyúló magasságának finomhangolása.
• `descent-override`: A betűk lefelé nyúló szárainak (pl. g, p, y) igazítása.
• `line-gap-override`: A sorok közötti alapértelmezett térköz pontos rögzítése.

Eredmény: 100%-ban stabil elrendezés és 0.000 CLS

A megfelelően méretezett fallback betűtípus alkalmazásával a betűváltás teljesen láthatatlanná és ugrásmentessé válik az emberi szem és a Google mérőrobotjai számára is, azonnal 0.00-ra csökkentve a betűtípus okozta elrendezési ugrálást.