dragoon0x Type Rendering
Cross-Platform Differences
| Platform | Rendering | Impact |
|---|---|---|
| macOS | Smooth, slightly heavier | Looks good at all sizes |
| Windows (ClearType) | Sharper, thinner | Thin weights look bad |
| Linux | Varies by distro | Inconsistent |
| iOS | Same as macOS | Excellent |
| Android | Varies by device | Test on budget devices |
Font Loading Strategy
<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/body.woff2" as="font" type="font/woff2" crossorigin>
<!-- Font display strategy -->
@font-face {
font-family: 'BodyFont';
src: url('/fonts/body.woff2') format('woff2');
font-display: swap; /* Show fallback immediately, swap when loaded */
}
Rules
- WOFF2 format only (best compression, broadest support)
- Subset fonts (only include characters you use)
- Preload above-fold fonts
font-display: swapfor body,optionalfor decorative- System font stack as fallback with matching metrics
- Test on Windows with ClearType (thin weights may be unreadable)
- Variable fonts: one file for all weights (better performance)