웹 최적화 - 구글폰트 워닝 "The resource was preloaded using link preload but not used within a few seconds from the window's load event."

 

 

 

지난번 폰드 다운로드 속도를 해결했더니 또다른 워닝이 나왔다.

지난번에 해결했던 구글 폰트 최적화 ↓ ↓ ↓

웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST)

 

 

 

 

 

1. 첫번째 이슈

The resource 
https://fonts.googleapis.com/css2?family=Noto+Sans+KR
 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

 

 

이유는 다음과 같았다. 모든 라우트에 모든 폰트를 프리로드 (미리 다운로드) 하기 때문이였다.

google font adds a preload for all fonts to all routes in your app,
which will cause the (harmless) warnings you're seeing.

 

 

폰트 속성으로 다운받는 것을 스타일 시트로 돌려 해결 (왜인지는 확인해봐야함)

<link
  rel="preload"
  as="font"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
/>

↓↓↓

<link
  rel="stylesheet preload"  // 스타일 시트 추가
  as="style"		    // 스타일로 속성 변경
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
/>

 

 

 

 

2. 두번째 이슈

Slow network is detected. Fallback font will be used while loading: http://font-path.extension`

network 세팅을 slow3g 등으로 느리게 변경했을 때 나오는 크롬의 고질적인 버그로 크롬팀도 알고있으나 딱히 대책이 나오진 않았다.

직접 다운받아 폰트페이스를 통해 cdn에 저장한 static 폰트를 불러와 해결하려고 했으나 오히려 용량이 더 커지는 문제가 발생하여,

이슈 클로징 하였다. 🥲 하지만 그 과정을 기록으로 남겨본다

 

 

 

1.  구글 폰트를 직접 다운로드 받자

 

아래 웹사이트에 들어가면 폰트를 다운로드 받을 수 있다.

google webfonts helper

 

자, 아래를 참고하여 현재 사용하는 폰트를 다운받아보자

 

2. s3 에 저장해서 cdn 으로 변환하기  (과정생략)

 

 

3. 직접 index.html 안에 @font-face 를 넣어줬다.

<style>
      /* noto-sans-kr-regular - latin_korean */
      @font-face {
        font-family: 'Noto Sans KR';
        font-style: normal;
        font-weight: 400;
        src: local(''),
          url('https://cdn-address/static/font/noto-sans-kr-v27-latin_korean-regular.eot?#iefix')
            format('embedded-opentype'),
          /* IE6-IE8 */
            url('https://cdn-address/static/font/noto-sans-kr-v27-latin_korean-regular.woff2')
            format('woff2'),
          /* Super Modern Browsers */
            url('https://cdn-address/static/font/noto-sans-kr-v27-latin_korean-regular.woff')
            format('woff'),
          /* Modern Browsers */
            url('https://cdn-address/static/font/noto-sans-kr-v27-latin_korean-regular.ttf')
            format('truetype'),
          /* Safari, Android, iOS */
            url('https://cdn-address/static/font/noto-sans-kr-v27-latin_korean-regular.svg#NotoSansKR')
            format('svg'); /* Legacy iOS */
      }
    </style>

 

 

 

 

 

 

 

 

 

 

 

ref: 

https://gwfh.mranftl.com/fonts 

https://stackoverflow.com/questions/49674092/preloading-font-with-rel-preload