CSS:@font-face

Performance Tunning

• How to Manage and Preload Local Fonts with Tailwind in Astro | BRAZY'S BLOG
• (Browser) 리소스 우선순위 - preload, preconnect, prefetch | Beomy - <link rel="???" />
• [CSS font-display, 글꼴 렌더링 방식을 변경하는 방법] - font-display
• Best practices for fonts
• [추천] Best Practices When Using Fonts
  • Creating font subsets | Dev Diary - pyftsubset 사용 방법 정리
  • Gaining security and privacy by partitioning the cache - Chrome Developers - 폰트를 직접 게시해야 하는 이유 (캐시 관련 보안 이슈)
    • "동일 사이트" 및 "동일 출처" 이해하기 - eTLD+1에 대한 설명.
  • List of typographic features - Wikipedia - pyftsubset의 --layout-features= 플래그에 넣는 옵션들 목록과 설명
  • Wakamai Fondue, the tool that answers the question “what can my font do?” - 폰트의 상세정보 확인 가능한 온라인 사이트
• 웹폰트 경량화: 폰트툴즈(fontTools)의 pyftsubset을 사용한 폰트 서브셋 만들기 | 44BITS - 한글 폰트 경량화 방법 설명
• 서브셋팅을 이용해 웹폰트 경량화 하기
• 웹 폰트 사용과 최적화의 최근 동향
• Optimize WebFonts
  • Best practices for fonts
  • Avoid invisible text during font loading
  • Optimize WebFont loading and rendering
  • Reduce web font size

Web font 로딩 속도 최적화 등... 요약하면 아래와 같다:

• &display=swap 은 기본
• preconnect 로 폰트 주소에 미리 연결
• preload 로 우선순위 비동기 CSS Fetch
• media="print" onload="this.media='all'" 추가
• noscript 대응 포함
• src 순서 적용 및 local 사용
• unicode-range 사용하여 파일 분할

Preload vs Prefetch vs Priorities

• Preload, Prefetch And Priorities in Chrome | by Yesl Koh | Medium

언제, 무엇을 사용해야할까?

<link rel="preload">

현재 페이지서 사용될거라 확신이 드는 자원들은 preload하여라.

<link rel="prefetch">

미래의 여러 navigation boundaries에서 사용될거라 생각되는 자원들은 prefetch하라.

See also

• Font
• otf/ttf
• woff/woff2
• eot
• svg/svgz
• Web Font
• CSS:@font-face
• fonttools (python - include pyftsubset)
• Web Font Loader gives you added control when using linked fonts via @font-face.

Favorite site

• [추천] NAVER D2 - 웹 폰트 사용과 최적화의 최근 동향 ¹
• [추천] WebFont 로딩 및 렌더링 최적화
• @font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) :: 지구별 안내서
• 웹폰트(@font-face) 적용법
• (CSS) 스타일시트에서 웹폰트 적용하기 : @font-face
• Stackoverflow - Vue Cli 3 Local fonts not loading (Vue/Web Font)
• [추천] 웹폰트 최적화 하기
• 웹 폰트 사용 가이드
• 구글 웹폰트를 빠르게 로드하는 팁 7가지
• 구글 웹 폰트 로딩을 최대한 빠르게 하기
  • The Fastest Google Fonts (원문)
• 웹폰트 최적화 기법에 관한 몇가지 이야기
• [추천] 한글 웹 폰트 경량화해 사용하기 | Coderifleman's blog
  • 요약: KS X 1001 한글만 서브셋으로 사용한다.

References