Optimize web font loading for better performance while maintaining visual quality
Optimize web font implementation for this project:
**Current Setup:**
- Fonts in Use: ${{FONTS_IN_USE}}
- Current Loading Method: ${{CURRENT_LOADING}}
- Page Types: ${{PAGE_TYPES}}
- Performance Issues: ${{PERFORMANCE_ISSUES}}
**Requirements:**
- Performance Target: ${{PERFORMANCE_TARGET}}
- Browser Support: ${{BROWSER_SUPPORT}}
- Offline Needs: ${{OFFLINE_NEEDS}}
Please provide:
1. **Font Audit**
- Weights currently loaded
- Actually used weights
- Character sets needed
- File size analysis
- Redundancy identification
2. **Subset Strategy**
- Language-based subsetting
- Character range optimization
- Latin extended needs
- Special character requirements
- Size savings estimate
3. **Format Optimization**
- WOFF2 primary recommendation
- WOFF fallback necessity
- Format support matrix
- Compression comparison
4. **Loading Strategy**
- Font-display recommendations
- Preload critical fonts
- Async load secondary
- Preconnect hints
- Resource hints implementation
5. **FOUT/FOIT Prevention**
- Flash of unstyled text handling
- Flash of invisible text handling
- Font loading API usage
- Fallback font matching
6. **Critical CSS Fonts**
- Above-fold font identification
- Inline critical font CSS
- Defer non-critical weights
7. **Variable Font Consideration**
- Variable font availability
- Size comparison vs static
- Browser support status
- Implementation approach
8. **Fallback Font Stack**
- System font matching
- Metric-compatible alternatives
- Size-adjust CSS property
- Visual consistency during load
9. **Caching Strategy**
- Cache-control headers
- Service worker caching
- CDN recommendations
- Version management
10. **Implementation Code**
- @font-face declarations
- Preload tags
- Font loading JavaScript
- CSS font-display usage
- Performance monitoring setup
Provide specific code implementations and measurable performance targets.Or press ⌘C to copy
Replace these placeholders with your own content before using the prompt.
[{FONTS_IN_USE][{CURRENT_LOADING][{PAGE_TYPES][{PERFORMANCE_ISSUES][{PERFORMANCE_TARGET][{BROWSER_SUPPORT][{OFFLINE_NEEDS]