I don't know how else to describe it.
When hovering a link or opening a popup, basically anything where state changes on something, it appears that my font gets loaded each time so there is a flash of a system font before my font shows. This causes the page to shift and I'm not sure how to fix this. It will only do it the first time the element is interacted with.
This is in my global styles
@font-face {
font-family: "PlusJakartaSans";
src: url("/fonts/PlusJakartaSans/PlusJakartaSans-Regular.woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "PlusJakartaSans";
src: url("/fonts/PlusJakartaSans/PlusJakartaSans-Medium.woff2");
font-style: medium;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "PlusJakartaSans";
src: url("/fonts/PlusJakartaSans/PlusJakartaSans-Bold.woff2");
font-style: bold;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "PlusJakartaSans";
src: url("/fonts/PlusJakartaSans/PlusJakartaSans-Light.woff2");
font-style: light;
font-weight: 300;
font-display: swap;
}
This is in my _document in the head
<link
rel="preload"
href="/fonts/PlusJakartaSans/PlusJakartaSans-Regular.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/PlusJakartaSans/PlusJakartaSans-Medium.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/PlusJakartaSans/PlusJakartaSans-Bold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/PlusJakartaSans/PlusJakartaSans-Light.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
Here is an example of what I'm seeing. This is happening on my local and Vercel. What am I missing?
This question is on the vercel discussion group as well along with the video of my problem
