글꼴 미리 로드

일반적으로 글꼴은 Google Fonts와 같은 타사 소스 또는 빌드 폴더에 저장된 파일에서 다운로드됩니다.

빌드를 실행한 후 js, css라는 2개의 폴더가 있는 정적 폴더를 얻습니다.
일부 글꼴 파일을 다운로드한 경우 세 번째 폴더인 media에 있습니다.

We can manually download them, or download a npm package, like @fontsource, that inside it has the files.

그런 다음 브라우저는 자체 속도로 해당 글꼴을 로드하지만 기본 브라우저 글꼴과 원하는 글꼴의 UI 깜박임이 발생할 수 있습니다.

더 나은 UI 느낌을 위해 브라우저에 미리 로드하도록 지시해야 합니다.

이를 달성하려면 제공된 link를 미리 로드하는 href 태그를 추가해야 합니다.

<link
rel="preload"
href="https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2"
as="font"
crossOrigin="anonymous"
/>

그러나 href 안에 무엇을 넣을지 어떻게 알 수 있습니까?

이를 위해 개발 도구에서 네트워크 탭을 열고 브라우저가 로드하는 것을 확인하고 복사해야 합니다 :)

To locate the font request, choose the Font filter at the top.

React를 사용하는 경우 이 link 태그를 index.html에 추가하거나 (Vanilla JS와 마찬가지로) 내부에 추가할 수 있지만 App.tsx에서 head 태그에 액세스하려면 App.tsx 라이브러리의 도움말을 사용해야 합니다.react-helmet-async 태그에 자식을 삽입하기만 하면 됩니다.
물론 더 많은 코드로 head를 "더럽히는"대신 별도의 구성 요소App.tsx로 래핑할 수 있습니다.

예를 들어 이 탐색 표시줄은 순식간에 이와 같이 표시됩니다(변화를 더 잘 보기 위해 gif 속도가 느려짐).



그러나 글꼴을 미리 로드한 후에는 깜박임이 발생하지 않습니다.

동일한 프로세스가 라이브러리에서 가져온 글꼴이나 다운로드한 글꼴 파일에 적용되며 유일한 차이점은 <PreloadFonts />가 다음과 같이 상대적이라는 점입니다.

<link
rel="preload"
href="/static/media/libre-franklin-latin-400-normal.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>

이제 내 질문은 명백한 UI 깜박임이 있는 경우 모든 글꼴이 자동으로 미리 로드되지 않는 이유입니다.