구글 폰트를 사용하지 않는 이유

✏️ 왜 실무에서는 폰트 연동 시에 왜 구글 폰트를 연결 해서 사용 하지 않는가? 에 대해 찾아보다가 사용하지 않는 이유와 사용 했을 시 나타나는 현상과 해결 방안에 대한 유용한 글을 발견 하여 이를 재 편집하여 정리 해보았다.

• 폰트 사용 시, 크게 구글 폰트(cdn) 연결 과 로컬 서버에서 폰트 파일을 연결 하는 방법이 있다.
• 실무에서는 주로 로컬 서버에서 폰트 파일을 연결하여 사용한다.

이유

1. 브라우저에서 로딩이 될 때까지 벌어지는 현상(깜빡거림, 안보였다 보여짐, 글씨체 바뀜) 이 일어남.
   • FOUT (Flash of Unstyled Text) : IE 브라우저에서 깜빡거리는 현상
   • FOIT (Flash of Invisible Text) : Chrome, Safari에서 로드 전까지 안보이는 현상
   • FOFT(Flash of Faux Text) : font-weight, font-style 적용 전 regular 폰트로 보였다가 적용되는 현상 시스템 글꼴→ 웹폰트 regular → 웹폰트 bold 순으로 보임.
     
2. 용량에 따른 성능 문제
   • 용량이 커서 불러오는데 시간이 걸린다.

해결 방법

구글 웹 폰트 로더

1. cdn https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js연결한다.
   • 자동으로 붙는 클래스 패턴
     • wf-loading: 1개 이상 폰트가 로딩 중
     • wf-active: 1개 이상 폰트 사용 가능
     • wf-inactive: 모든 폰트 사용 불가능
     • wf-폰트패밀리-스타일굵기-loading: 특정 폰트 로딩 중
     • wf-폰트패밀리-스타일굵기-active: 특정 폰트 사용 가능
     • wf-폰트패밀리-스타일굵기-inactive: 특정 폰트 사용 불가능
2. script 와 style을 추가해준다.

   1. FOUT

      <script>
      WebFont.load(
        custom: {
          families: ['NanumSquare'], // @font-face에 선언한 폰트 패밀리명
          urls: ['../css/NanumSquare.css'], // @font-face가 선언된 css 경로
        }
      });
      </script>
      <style>
        .wf-nanumsquare-n4-active #fonts_loaded { /* 웹 폰트 사용 가능할 때 속성 적용 */
          font-family: NanumSquare, sans-serif;
        }
      </style>

   2. FOIT

      <script>
      WebFont.load(
        custom: {
          families: ['NanumSquare'], // @font-face에 선언한 폰트 패밀리명
          urls: ['../css/NanumSquare.css'], // @font-face가 선언된 css 경로
        }
      });
      </script>
      <style>
        .#fonts-loaded { /* 웹 폰트 다운로드 전에는 화면을 보여주지 않음 */
          display: none;
        }
        .wf-nanumsquare-n4-active #fonts_loaded { /* 웹 폰트 사용이 가능하면 화면을 보여주고 웹 폰트 속성 적용 */
          display: block;
          font-family: NanumSquare, sans-serif;
        }
      </style>

   3. FOFT

      <script>
      	WebFont.load({
          custom: {
            families: ['NanumSquare-Regular', 'NanumSquare-Bold'],
            urls: ['../css/NanumSquare.css']
          }
        })
      </script>
      
      <style>
        .wf-nanumsquareregular-n4-active #fonts_loaded { /* 나눔스퀘어 Regular 폰트가 사용 가능할 때 웹 폰트 속성 적용 */
          font-family: NanumSquare-Regular, sans-serif;
        }
        .wf-nanumsquarebold-n4-active #fonts_loaded { /* 나눔스퀘어 Bold 폰트가 사용 가능할 때 웹 폰트 속성 적용 */
          font-family: NanumSquare-Bold, sans-serif;
        }
      </style>

참고 문헌

• https://wit.nts-corp.com/2017/02/13/4258