정중식’ 블로그
정중식’ 블로그/
폰트 최적화
폰트 최적화

폰트 최적화

카테고리
React
날짜
2024년 06월 12일
작성자
JeongjungsikJeongjungsik
태그
font

폰트 노출 방식들

font-display:’옵션’

폰트 적용 시점을 설정할 수 있다.
font-display: '적용할 옵션 넣어주면 됌'

// ex)
@font-face {
  font-family: 'NanumGeumEunBoHwa';
  src:
    url('../assets/fonts/NanumGeumEunBoHwa.woff2') format('woff2'),
    url('../assets/fonts/NanumGeumEunBoHwa.woff') format('woff'),
    url('../assets/fonts/NanumGeumEunBoHwa.ttf') format('truetype');
    
  font-display: swap;
}
  • swap(FOUT): 폰트가 다운로드 되기 전에는 기본 폰트를 노출하고, 다운로드가 되면 폰트 교체함
  • block(FOIT): 3초내에 폰트를 다운받지 못하면 기본 폰트 먼저 노출함
  • fallback(FOIT): 0.1초 정도 block이 발생. 3초이내로 다운받지 못하면, 다운로드 여부와 상관없이 기본 폰트를 노출함 (캐싱처리가 됌, 다음번엔 바로 보여줌)
  • optional(FOIT): fallback과 비슷함 폰트가 다운로드 받는 시간이 너무 오래걸면 브라우저가 연결을 취소 할 수 있음 (캐싱 처리O)
      • 💡
      FOUT와 FOIT ? FOUT - flash of unstyled text FOIT - flash of invisible text
 
🐶🍯Tip!:
폰트 옵션을 테스트 할 때는,
f12→네트워크→상단에있는 캐시 사용 중지 옵션 체크 하고 하기
 
 

폰트 용량 줄이기

woff2 방식, woff 방식

폰트 형식은 EOT, TTF/OTF, WOFF, WOFF2 등 다양함
여기서 폰트 용량 크기는 EOT→TTF/OTF→ WOFF→ WOFF2 순서로 용량이 작아짐
그래서 폰트 적용을 할 때 아래와 같이함
@font-face {
  font-family: 'NanumGeumEunBoHwa';
  src:
    url('../assets/fonts/NanumGeumEunBoHwa.woff2') format('woff2'),
    url('../assets/fonts/NanumGeumEunBoHwa.woff') format('woff'),
    url('../assets/fonts/NanumGeumEunBoHwa.ttf') format('truetype');
  font-display: block;
}
단, woff2는 아직 호환되지않는 브라우저가 있어서, woff2를 먼저 적용시켜주고 적용이안되면 그아래 woff를 적용해주고 woff가 호환이 안되면 모든 곳에서 적용이 가능한 ttf 형식을 적용시켜주게끔 해준것임
 

subset (필요한 글자만 추려서 폰트를 만들기)

 
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789,:.;()*!?’@#<>$%^+-=~ 등등도 붙여넣어주자
  • 자주 쓰이는 목록을 복사해서 붙여넣는 단계임
  • Formats 에서 TTF,WOFF,WOFF2 체크 후 폰트 전환 버튼 클릭
 
이렇게하면 폰트 용량이 엄청 줄어듦
 

preload 폰트 로드 속도 개선

아래는 F12 → 성능 탭 → 녹화버튼 후 새로고침하고 녹화 정지 누르고 뜨는걸 분석해본것이다.
notion image
WEBP라는 이미지들을 먼저 불러오고 나중에 폰트를 불러오는 모습을 알 수 있다. (폰트 로드가 지연되는 모습)
 
FOIT와 FOUT 시간을 줄이기 위해 폰트를 미리 로드 하는 방식을 알아보자.
  • install
yarn add -D webpack-font-preload-plugin
  • craco.config.js 설정 ( craco를 안쓰는 사람은 패쓰해도 됌)
const CracoAlias = require('craco-alias')
const FontPreloadPlugin = require('webpack-font-preload-plugin') // 추가

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        tsConfigPath: 'tsconfig.paths.json',
      },
    },
  ],
  // 추가
  webpack: {
    plugins: {
      add: [new FontPreloadPlugin()],
    },
  },
}
  • webpack.config.js 에 추가 (craco를 안쓰는 사람은 여기에 추가)
 webpack: {
    plugins: {
      add: [new FontPreloadPlugin()],
    },
  },
 
  • [보너스] - 따로 프리로드 주고싶은 폰트만 적용 시켜줄 수 있음
 webpack: {
    plugins: {
      add: [
        new FontPreloadPlugin({
          extensions: ['woff2'],
        }),
      ],
    },
  },e
 
  • 확인해보면 이렇게 나옴
notion image
 

댓글

guest