css font

font css 관련을 적거나 모아 둔다

font-display

A font-display setting for slow connections

caniuse font-display

ie 에서는 지원되지 않는다

관련 글들

글꼴 로딩 전략에 대한 종합 가이드Zach Leatherman

The Fastest Google Fonts

  • Google Fonts를 20% 더 빠르게 로드

웹 폰트 사용과 최적화의 최근 동향

웹폰트의 문제점을 이야기하고 해결하는 방향으로 웹 폰트 최적화를 이야기 한다.

  1. 폰트 파일의 용량 줄이기
    1. WOFF 2.0 형식 폰트
      • 압축된 폰트
    2. 서브셋 폰트
      • 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트
    3. unicode-range 속성
      • unicode-range 속성은 유니코드로 지정한 글자에만 웹 폰트를 적용하는 속성
  2. 텍스트가 항상 보이게 하기
    1. 브라우저의 렌더링 차단 처리 방식
      1. FOIT (Flash Of Invisible Text)
      2. FOUT (Flash Of Unstyled Text)
      3. FOUT 방식 추천
        • FOIT 방식은 텍스트가 보이지 않는 문제가 있기 때문에 UX 관점에서 좋지 않다
    2. Font Face Observer 라이브러리
      • 웹 폰트의 로딩 상태를 추적할 수 있는 폰트 로더(font loader)
    3. CSS의 font-display 속성
      • block: FOIT와 동일하게 작동
      • swap: FOUT와 동일하게 작동
      • fallback: 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링한다. 2초 동안 로딩이 완료 된 경우만 웹 폰트로 전환한다.
      • optional: fallback 옵션과 비슷하지만 다르게 작동한다. 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않는다
    4. font-display 속성을 사용한 최적화
  3. Font Style Matcher로 폰트 간 차이 줄이기
    • font-size, line-height, letter-spacing 으로 로드 후 폰트와 비슷하게 만든다
  4. preload 옵션으로 먼저 로딩하기

태그: ,

업데이트: