# Font Loading **Purpose**: Guidelines for loading and using web fonts --- ## Quick Reference **Recommended**: Google Fonts with preconnect ```html ``` --- ## Google Fonts (Recommended) ### Basic Loading ```html ``` ### Multiple Fonts ```html ``` ### CSS Usage ```css body { font-family: 'Inter', sans-serif; } code, pre { font-family: 'JetBrains Mono', monospace; } ``` --- ## Popular Font Combinations ### Modern UI ```html ``` ### Professional ```html ``` ### Editorial ```html ``` ### Friendly ```html ``` --- ## Performance Optimization ### Subset Fonts ```html ``` ### Preload Critical Fonts ```html ``` ### Self-Hosted Fonts ```html ``` --- ## Best Practices **Do ✅:** - Use `font-display: swap` (included in Google Fonts URL) - Preconnect to font servers - Limit to 2-3 font families - Subset when possible - Preload critical fonts **Don't ❌:** - Load too many font weights - Use fonts synchronously (blocking) - Load fonts you don't need --- ## Related - `images-guide.md` - Image guidelines - `icons-guide.md` - Icon systems - `cdn-resources.md` - CDN libraries