Issue with Noto Sans TC Font on iPhones Below 14 devices (Flash of Invisible Text (FOIT)

Question

We are experiencing a Flash of Invisible Text (FOIT) issue with the Noto Sans TC font on our Chinese site, specifically affecting iPhones below iOS 14 models. The issue does not occur on iPhone 15 or newer models. The problem manifests as a brief white screen before the text appears, likely due to font loading delays.

Here’s a detailed summary of our investigation and actions taken.

Initial Problem:

• Issue: FOIT occurs due to the lack of the font-display property in the Google Fonts CSS, causing a delay in text rendering.
• Affected Devices: iPhones running iOS below 14 Models devices.

Attaching a screenshot for ref

Issue with Iphones white screen

whitescreen issue on iphones

Actions Taken/Steps Taken to Reduce API Call Size:

1. Added font-display: swap; Parameter:
   • URL Example: https://fonts.googleapis.com/css?family=Noto+Sans+TC:300&display=swap
   • Effect: The fallback font is displayed initially and then swapped with the desired font once loaded but still issue persist.
2. Subset Parameter:
   • Used subset=zh-Hant for Traditional Chinese, but it doesn’t seem to work as expected.
3. Text Parameter:
   • Used text=hongkong to limit the font file to specific glyphs, but this did not resolve the issue.
4. Variable Fonts:
   • Considered capability=VF to handle variable fonts, but the impact is still under review.
5. Local Font Hosting:
   • Hosting the fonts locally worked fine, but the file size is over 5.4 MB, which causes performance issues. Reducing the CSS from Google Fonts seems to improve performance slightly.

Testing Results: * Safari: The solution works as expected, displaying a fallback font and then swapping to the Google Font, although not perfectly. * Chrome: Issues persist with font rendering, especially after scrolling, where parts of the page fail to load the font promptly.

Further Observations:

• Reducing the number of font weights and styles improved performance but altered the page’s design this working but not that accurate.
• The issue appears more pronounced in Chrome compared to Safari, indicating potential browser-specific handling of font-loading strategies.
• Strangely, the issue only occurs on the Product Listing Page (PLP) page and not only on the Product Display Page (PDP) pages, despite using the same font and having tried reducing the font.

Request for Assistance: Given the constraints with the Google Fonts API and the issues we’re facing any suggestions.

For reference, I’ve created a sample CodePenNoto-sans-TC Iphone Project with a similar structure to our project. Due to security reasons, I am unable to provide our actual page here.


Any advice or recommendations on how to resolve these issues or obtain optimized font files would be greatly appreciated.