Fonts are heavier in Safari on the deployed site when using a Custom Font

[steveharman]

ISSUE

When I view my deployed site using Safari (Mac), all the headings and paragraph text are heavier (bolder) than when I browse the undeployed site. The deployed site is fine when I view it using Chrome, Brave, Firefox, Opera and the text is also fine if I use Safari to view the local undeployed Worpress/Elementor site.

However, after the site is deployed to Netlify, my text is bolder than the local site when viewed with Safari. Same browser version, same Mac, same everything - the only difference between the text looking ok (correct weight) and not looking ok (bolder) is viewing it with Safari, after it’s deployed.

I’ve verified the issue on two different Macs/Safari installs. I tried deleting the WP2Static cache and redeploying, also tried clearing the browser cache - always the same issue.

STEPS TO REPRODUCE

• Upload a custom font into Elementor > Custom Fonts
• I used the Google Font called "Inter" which I downloaded from Google Fonts, and uploaded all the variants; woff, woff2, eot, scg, ttf
• Create a Global Font in Elementor's Site Settings > Global Fonts and choose your newly uploaded Custom Font (in my case Inter)
• NB: As Inter has been uploaded as a Custom Font it is now in the Custom Fonts section of the font dropdown when editing a Global Font, as opposed to being grouped beneath Google
• Apply the Global Font to some text on your page, a heading, paragraph - it doesn't seem to matter
• Save the page, visit WP2Static and deploy the site

RESULT

• When visiting the deployed site using Safari (Mac, desktop) all the text where the Global Font has been applied is much heavier/bolder than it should be.
• If visiting the site using any other browser; Chrome, Brave, Opera, Firefox the text looks fine.
• Please see attached screenshot.

ENVIRONMENT

• WordPress 6.1.1
• PHP 7.4
• Nginx
• MariaDB

UPDATE:
Since originally posting this to the WP2Static forum, I've done some more research and seem to have a solution / perhaps identified the root cause:

To help speed up my site, I disabled Google Fonts via the option Elementor's settings and uploaded just the two Custom Fonts that my site uses (Inter & Quicksand). The issue described above only happens when using Inter as an uploaded Custom Font. If I remove the Custom Font of Inter which was downloaded from the Google Fonts site, re-enable Google Fonts in Elementor, and use Inter from Google's CDN rather than self-served the problem goes away.