Reduce cumulative layout shift in Docusaurus with fontaine

Cumulative Layout Shift (CLS), also known as "jank," is a Core Web Vitals metric that measures the instability of content on a webpage, often causing irritation when text moves unexpectedly. Custom fonts can contribute to CLS, particularly in mobile environments, as demonstrated by the use of the Poppins font on a blog. To address this, a tool called fontaine was explored, which can reduce jank by adjusting font loading strategies, specifically with Docusaurus sites. The implementation of fontaine involved adding it as a dependency and creating a plugin to manage font fallbacks and CSS variables, which initially presented challenges but resulted in significant improvements once adjusted. The CLS score of the blog dropped from 0.019 to 0, showcasing the tool’s effectiveness in stabilizing layout shift, and highlighting its utility beyond Docusaurus to other frameworks like Vite and Next.js. The article appreciates Daniel Roe's contribution in resolving issues with fontaine and acknowledges the emergence of similar solutions like @next/font.