astro-font

astro-font is a highly optimized font loading and layout-shifting prevention utility built for the Astro web framework. It automatically generates fallback CSS rules, loads fonts asynchronously, and adjusts sizing metrics to prevent Cumulative Layout Shift (CLS) issues.

Key Features of astro-font

• CLS Prevention: Automatically calculates and injects font override rules to match system font fallback layouts.
• Zero-Config Integration: Plugs directly into the Astro head layout with minimal setup options.
• Local & Google Fonts Support: Handles custom self-hosted web fonts as well as remote Google Fonts assets seamlessly.
• Modern Formats First: Prioritizes WOFF2 loading routes with fallback checks for older formats.

Benefits of Using astro-font

• Improve Web Vitals: Boosts your Cumulative Layout Shift (CLS) scores, improving SEO and user experience.
• Eliminate Font Flickers: Prevents annoying text shifts (FOUT/FOIT) when heavy custom fonts finish loading.
• Fast Page Loads: Asynchronous font loading keeps script sizes small, speeding up early page rendering.

Web performance and UI testers can use astro-font to eliminate Cumulative Layout Shift (CLS) caused by slow font rendering, ensuring a visually stable user experience.