Preload fonts with Create React App JS bundle

Question

Despite following the recommended approach to self-hosting custom fonts in my React application (bootstrapped with Create React App, unejected), I am experiencing a flash of unstyled text upon load (the below GIF is slowed down):

My folder structure is:

- src
-- fonts
--- custom-font.woff
- index.scss

// index.scss

@font-face {
  font-family: "CustomFont";
  src: url("./fonts/custom-font.woff") format("woff");
}

I have tried:

• Moving the fonts to the public folder with a rel="preload" tag in the index.html, but then the index.scss in the src folder can't resolve the module when included in the @font-face at-rule.
• Adding loading state in the component, with a useEffect hook to set the loading state as the component is mounted, but it appears the font is only loaded in after the effect takes place, so the problem remains.

Is there a recommended approach to loading in fonts that stops the FOUT, or delaying component render until the font is fully loaded?

Please note:

• I am not interested in Google Fonts, or other CDNs, only self-hosted fonts
• I do not want to eject