Do My Fonts and Text Look Right Everywhere?

Safari has 1 font fallback issue; Firefox wraps 1 heading into an extra line.

Chromium: Pass
Safari: Differences Found (1)
Firefox: Differences Found (1)

Side-by-Side Typography Comparison

Chromium Baseline (Reference)
Chromium text rendering screenshot
Safari 1 Difference Detected
Safari text rendering screenshot
Firefox 1 Difference Detected
Firefox text rendering screenshot

Typography Consistency Matrix

Evaluation Category Chromium Safari Firefox
Font loading and fallback
Pass
Fallback Active
Pass
Font size and weight
Pass
Pass
Pass
Text wrapping
Pass
Pass
Unexpected Wrap
Line height and spacing
Pass
Pass
Pass
Missing glyphs
Pass
Pass
Pass
Text clipping and overflow
Pass
Pass
Pass
Readability
Pass
Pass
Pass

Top Typography Differences

Primary Web Font Loading Failure • Safari

High
Safari (Observed)
Safari crop
Chromium (Reference)
Reference crop

Difference: Safari rejected the WOFF2 font payload due to MIME-type mismatch, causing fallback to system serif.

Suggested Fix: Verify server Content-Type header serves font/woff2 and declare format('woff2') in @font-face.

Unexpected Line Wrap on Hero Header • Firefox

Medium
Firefox (Observed)
Firefox crop
Chromium (Reference)
Reference crop

Difference: Slightly wider glyph tracking in Gecko forces word 'Delivery' onto a second line in fixed 420px container.

Suggested Fix: Set max-width: min-content or add word-break: keep-all; allow hero title flex-grow up to 480px.

Copy Fix Prompt (AI Consolidated)

/* Cross-Browser Typography Fix Directives */

1. Safari Fallback Fix:
- Target: @font-face declaration for 'BrandSans'
- Issue: Safari rejected WOFF2 font response
- Action: Set HTTP header Content-Type: font/woff2 and ensure @font-face includes correct format: format('woff2')

2. Firefox Line Wrap Fix:
- Selector: .hero-title
- Issue: Multi-line break in Gecko due to container constraint
- Action: Change container max-width: 420px to min(100%, 480px) and add text-wrap: balance

Acceptance Criteria:
- Validate that hero title remains a single line across Chromium, Safari, and Firefox at 1280px viewport.
- Confirm BrandSans renders in Safari inspector network tab with HTTP 200 font/woff2.