Font rendering across platforms, hinting, subpixel rendering, and font loading optimization.
| 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 |
<!-- 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 */
}
font-display: swap for body, optional for decorative