- 5 steps to faster web fonts /// Iain Bean
- How to Stop Lighthouse Complaining About Render Blocking Google Fonts | Codeboosh
- A Comprehensive Guide to Font Loading Strategies—zachleat.com
- How to avoid layout shifts caused by web fonts – Simon Hearne
- The Fastest Google Fonts – CSS Wizardry – Web Performance Optimisation
- Time to Say Goodbye to Google Fonts
- The Best Font Loading Strategies and How to Execute Them | CSS-Tricks
요약하자면
- woff2
- font-display로 레이아웃 이슈 최소화
- preload
- self (feat. google webfonts helper)
몇몇 권장사항은 한글 폰트에서는 사실상 불가능한 부분이라 가능한 부분들을 적용하면 된다.
- A Variable Fonts Primer
- Google Fonts
- Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks
- Variable Fonts for Developers
- Using CSS Custom Properties to Adjust Variable Font Weights in Dark Mode | CSS-Tricks1
Footnotes
-
다크모드에서 weight가 시각적으로 차이가 날수 있기때문에 그럴경우 변수로 분리해서 대응하는 방법 ↩
async function loader() {
const family = 'Material Symbols Outlined'
const source =
'url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v75/kJEhBvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oFsLjBuVY.woff2)'
const fontFace = new FontFace(family, source)
await fontFace.load()
}