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

Đang mở
  • Có gì không ổn?
#897 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
css, php
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Bắt đầu bằng cách tái hiện deployment với một font Inter tùy chỉnh của Elementor, sau đó so sánh các font asset được tạo ra và CSS với phiên bản Google CDN trong Safari và các trình duyệt khác. Công việc được xem là hoàn tất khi site đã deployment render font tùy chỉnh ở weight mong muốn trong Safari mà không gây hồi quy trên các trình duyệt khác.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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
Ngôn ngữ chính
PHP
Star
1.5k
Fork
292
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của elementor/wp2static

Tất cả issue của elementor/wp2static

Issue tương tự

Thêm issue về PHP

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.