Custom font not applying consistently across browsers when loaded via @font-face

I'm trying to load a custom font on my site using @font-face, but the font renders correctly in Chrome while falling back to the default sans-serif in Firefox and Safari. I've verified the font files exist and return a 200 status in the Network tab.

Here's my CSS:

css

@font-face { font-family: 'MyCustomFont'; src: url('/fonts/mycustomfont.woff2') format('woff2'), url('/fonts/mycustomfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } body { font-family: 'MyCustomFont', Arial, sans-serif; }

What I've tried:

Confirmed the font files load (200 OK in all three browsers).

Added font-display: swap to avoid FOIT.

Checked CORS headers on the font server (returns Access-Control-Allow-Origin: *).

Cleared cache and tested in incognito windows.

Expected: Font renders as MyCustomFont in all browsers. Actual: Only Chrome renders correctly; Firefox and Safari show Arial.

No console errors appear in any browser. What could cause this cross-browser inconsistency?