Module-federation에서 webfontloader은 어떻게 적용 해야 할까?

TL;DR

• remote의 폰트를 host에서도 똑같이 적용.
• 모든 패밀리 사이트의 폰트는 process.env.VUE_APP_COMM_HOSTNAME + "/styles/fonts/_font.css" 으로 일관성있게 적용 하고자 도입
• blink현상 없이 폰트 적용 하고자 도입

remote

• webfontloader.ts

export async function loadFonts() {
  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */ "webfontloader");

  webFontLoader.load({
    custom: {
      families: ["SpoqaHanSansNeo"],
      urls: ["/styles/fonts/_font.css"],
    },
  });
}

• remote package
  

• _font.css

/* Font - SpoqaHanSansNeo */
@font-face{font-family:'SpoqaHanSansNeo';font-weight:700;font-display:swap;src:local('Spoqa Han Sans Neo Bold'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2') format('woff2'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff') format('woff'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.ttf') format('truetype')}
@font-face{font-family:'SpoqaHanSansNeo';font-weight:500;font-display:swap;src:local('Spoqa Han Sans Neo Medium'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2') format('woff2'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff') format('woff'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.ttf') format('truetype')}
@font-face{font-family:'SpoqaHanSansNeo';font-weight:400;font-display:swap;src:local('Spoqa Han Sans Neo Regular'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2') format('woff2'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff') format('woff'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.ttf') format('truetype')}
@font-face{font-family:'SpoqaHanSansNeo';font-weight:300;font-display:swap;src:local('Spoqa Han Sans Neo Light'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff2') format('woff2'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Light.woff') format('woff'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Light.ttf') format('truetype')}
@font-face{font-family:'SpoqaHanSansNeo';font-weight:100;font-display:swap;src:local('Spoqa Han Sans Neo Thin'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff2') format('woff2'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.woff') format('woff'), url('./SpoqaHanSansNeo/SpoqaHanSansNeo-Thin.ttf') format('truetype')}

host

export async function loadFonts () {
  const webFontLoader = await import(/* webpackChunkName: "webfontloader" */"webfontloader");

  webFontLoader.load({
    custom: {
      families: ["SpoqaHanSansNeo:100,300,400,500,700&display=swap"],
      urls: [process.env.VUE_APP_COMM_HOSTNAME + "/styles/fonts/_font.css"],
    },
  });
}

회고

• webfontloader가 꼭 필요하지 않음.
• 절대적 로딩 속도는 같음.
• 폰트를 먼저 로드 할것이냐, 컨텐츠를 먼저 로드 할것이냐의 차이 일뿐.