elementor / elementor/wp2static

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

Open
#897 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
PHP
Stars
1.5k
Forks
294
PR merge metrics
No merged PRs in 30d

Description

**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.

wpHeavyFonts

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.