如何在 React js 中预加载自定义字体？

Question

I'm usinf otf fontface,it will take 819ms to load in deployed site.How we can preload font so that font loads early.

index.scss in /src/index.css

@font-face {
  font-family: 'Pro';
  font-weight: 400;
  font-display: fallback;
  src: url('./Fonts/Pro/Pro_Regular.otf');
  unicode-range: 'U+000-5FF';
}

font placed in /src/Fonts/Pro/Pro_Regular.otf folder.

Answer 1

You can preload your fonts like this

<link rel="preload" href="./Fonts/Pro/Pro_Regular.otf" as="font" crossorigin="anonymous" />

Also, you should use some CDN and preload your fonts

Answer 2

You can try this:

useEffect(() => {
  document.fonts.load("12px Merriweather").then(() => setIsReady(true));
}, [])