I am currently in the process of creating my own personal blog using next.js.
While everything is going smoothly with the use of Google Fonts for font styling, I have encountered an issue with initial content shift upon loading. This occurs when a new font is being loaded as not all fonts have the same spacing and sizes.
My main question now is how can I prevent this content shift from happening?
Although many suggestions recommend adding a loading screen until all resources are loaded, I believe that bundling everything directly into the HTML file would be the ideal solution. NextJS already handles inline styles for me using <style/> tags, and next-images takes care of converting small images into base64 format for inline display. So, my concern lies in automatically inlining the fonts without having to manually adjust numerous @font-face declarations every time I want to change the font.
Currently, this is what I am using:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
What I envision is for NextJS to automatically convert it to something similar to this:
@font-face {
font-family: 'myfont';
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}