CSS:@font-face

lastmod 2023-07-08created 2021-07-1017 edits

Performance Tunning

• How to Manage and Preload Local Fonts with Tailwind in Astro | BRAZY'S BLOG
• (Browser) Resource priorities - preload, preconnect, prefetch | Beomy - <link rel="???" />
• [CSS font-display, How to change the font rendering method] - font-display
• Best practices for fonts
• [Recommended] Best Practices When Using Fonts
  • Creating font subsets | Dev Diary - Summary of how to use pyftsubset
  • Gaining security and privacy by partitioning the cache - Chrome Developers - Why you should host fonts yourself (cache-related security issue)
    • Understanding "same-site" and "same-origin" - Explanation of eTLD+1.
  • List of typographic features - Wikipedia - List and description of the options for the --layout-features= flag of pyftsubset
  • Wakamai Fondue, the tool that answers the question “what can my font do?” - Online site for checking detailed font information
• Slimming down web fonts: creating font subsets with pyftsubset from fontTools | 44BITS - Explains how to slim down Korean fonts
• Slimming down web fonts with subsetting
• Recent trends in web font usage and optimization
• Optimize WebFonts
  • Best practices for fonts
  • Avoid invisible text during font loading
  • Optimize WebFont loading and rendering
  • Reduce web font size

Web font loading speed optimization, etc... In summary:

• &display=swap is the default
• Connect to the font address in advance with preconnect
• Prioritized asynchronous CSS fetch with preload
• Add media="print" onload="this.media='all'"
• Include noscript handling
• Apply src order and use local
• Split files using unicode-range

Preload vs Prefetch vs Priorities

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

When should you use what?

<link rel="preload">

Preload resources you are confident will be used on the current page.

<link rel="prefetch">

Prefetch resources you think will be used across multiple future navigation boundaries.

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

• [Recommended] NAVER D2 - Recent trends in web font usage and optimization ¹
• [Recommended] Optimize WebFont loading and rendering
• @font-face usage rules (differences between eot, woff, otf/ttf, svg/svgz) :: A Guide to Planet Earth
• How to apply web fonts (@font-face)
• (CSS) Applying web fonts in a stylesheet : @font-face
• Stackoverflow - Vue Cli 3 Local fonts not loading (Vue/Web Font)
• [Recommended] Optimizing web fonts
• Web font usage guide
• 7 tips for loading Google web fonts fast
• Making Google web font loading as fast as possible
  • The Fastest Google Fonts (Original)
• A few notes on web font optimization techniques
• [Recommended] Using slimmed-down Korean web fonts | Coderifleman's blog
  • Summary: Use only the KS X 1001 Hangul characters as a subset.

References