'Next js self hosted font flashes on rerenders

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

fonts next.js

Solution 1:^[1]

Turns out that next was not caching the font so on every render/re-render it would get the fonts again, hence the FOUT.

Found the solution here - https://stackoverflow.com/a/70920009/2529106

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	wind_kind

'Next js self hosted font flashes on rerenders

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]