preloading

브라우저 로딩시에 폰트를 미리 로딩해두는 방법을 사용한다면, 폰트 깜빡현상을 줄이거나 없앨 수 있습니다.

• 웹 폰트를 그대로 사용

  대부분 구글 폰트를 그대로 사용하는 경우가 많기 때문에, 프로젝트 전체가 구글 폰트라면, 아래 방식을 추천합니다.

  1. 구글 폰트에서 사용할 폰트검색 후 체크

  2. 보여지는 link 태그 복사
     

  3. [프로젝트 폴더명]/index.html 에 해당 코드 inject

     

• 다운받은 폰트 사용시

  • vite 사용하여 프리로딩하기

    1. public 내의 font 파일 (woff2) 파일들을 전부 읽음

    // 폰트 세팅
    const fontsDirectory = resolve(__dirname, "public/assets/[프로젝트 폴더]/fonts");
    const fontFiles = readdirSync(fontsDirectory).filter((file) =>
      file.endsWith(".woff2")
    );
    
    const injectFontsToHead: HtmlTagDescriptor[] = fontFiles.map((fontFile) => ({
      injectTo: "head",
      tag: "link",
      attrs: {
        rel: "preload",
        href: `/assets/[프로젝트 폴더]/fonts/${fontFile}`,
        as: "font",
        type: "font/woff2",
        crossOrigin: "anonymous",
      },
    }));

    2. createHtmlPlugin 을 통하여 html head 태그 안에 inject 하면 프로젝트 내에 프리로딩이 완료됩니다.

       export default defineConfig({
         ~~
         plugins: [
           ~~
           createHtmlPlugin({
             inject: {
               ~
               tags: injectFontsToHead,
             },
           }),
          ~~
        ],
      });

  • 설정 폰트 index.html 에 사용

    <link rel="stylesheet" as="style" href="/assets/[프로젝트 폴더명]/fonts/fonts.css"/>

적용시

1. 적용전
   
2. 적용후