From fb74ccbdc2422b3a2275667e84970208959f4d41 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Mon, 1 Dec 2025 12:26:33 -0600 Subject: [PATCH] fix: Change font-display from swap to optional to eliminate CLS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit font-display: swap causes layout shift when fonts load and replace fallback. font-display: optional prevents CLS entirely - if font doesn't load in ~100ms, fallback is used permanently. With preload, fonts should load in time. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- Assets/Css/critical-bootstrap.css | 6 +++--- Assets/Css/css-global-fonts.css | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/Assets/Css/critical-bootstrap.css b/Assets/Css/critical-bootstrap.css index 4b1cdbb1..6e83da1f 100644 --- a/Assets/Css/critical-bootstrap.css +++ b/Assets/Css/critical-bootstrap.css @@ -30,21 +30,21 @@ src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; - font-display: swap; + font-display: optional; /* CLS fix: no swap, usa fallback si fuente no carga a tiempo */ } @font-face { font-family: 'Poppins'; src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; - font-display: swap; + font-display: optional; } @font-face { font-family: 'Poppins'; src: url('/wp-content/themes/roi-theme/Assets/Fonts/poppins-v24-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; - font-display: swap; + font-display: optional; } :root { diff --git a/Assets/Css/css-global-fonts.css b/Assets/Css/css-global-fonts.css index 53edae5f..25afaac6 100644 --- a/Assets/Css/css-global-fonts.css +++ b/Assets/Css/css-global-fonts.css @@ -78,7 +78,7 @@ src: url('../Fonts/poppins-v24-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; - font-display: swap; + font-display: optional; } @font-face { @@ -86,7 +86,7 @@ src: url('../Fonts/poppins-v24-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; - font-display: swap; + font-display: optional; } @font-face { @@ -94,7 +94,7 @@ src: url('../Fonts/poppins-v24-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; - font-display: swap; + font-display: optional; } @font-face { @@ -102,7 +102,7 @@ src: url('../Fonts/poppins-v24-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; - font-display: swap; + font-display: optional; } /* ============================================