I’m encountering a problem with font rendering on my CapCut-related website, which heavily relies on custom web fonts for its design. The issue is particularly noticeable with some non-Latin scripts, such as Arabic and Hindi, where the text appears misaligned or certain glyphs are not displaying correctly.
Here’s what I’ve done so far:
The custom fonts are hosted locally and declared using @font-face in CSS.
I’ve verified that the fonts support the problematic scripts by testing them in offline tools, and they render fine there.
I’ve added font-display: swap; to improve loading performance, but the rendering issue persists even after the fonts fully load.
The issue appears to affect specific browsers, mainly on mobile devices.
Could this be related to how the fonts are being embedded or an issue with the website’s CSS? Does anyone have experience handling such font rendering issues on multilingual websites?
Any guidance or tools to troubleshoot this further would be greatly appreciated!
This probably belongs in the SIL Fonts category rather than Bloom. There are a whole lot of things that could be affecting the rendering on mobile devices. Can you point me to a few examples on your site of both misalignment and certain glyphs failing? What fonts are you using? Are they SIL ones? TTF or WOFF or WOFF2? What browsers/OSes are failing? You use the term ‘embedded’ but do you really mean that the CSS refers to the hosted font files via @font-face CSS? Font ‘embedding’ in documents is a whole different technology.
This is unlikely to be something you can fix by tweaking the CSS. It’s more likely to be problems with the underlying text, the text encoding, browser/OS-specific support for certain scripts, or with the fonts themselves.
Thank you for your response! I appreciate your detailed questions—they’ve given me some additional areas to investigate.
Here are the details you requested:
Fonts Used:
The primary fonts in use are “CustomFontArabic” and “CustomFontDevanagari,” which include support for Arabic and Hindi scripts. These are not SIL fonts but are custom-designed and hosted locally.
Font Format:
The fonts are available in TTF, WOFF, and WOFF2 formats. The @font-face rule specifies all three formats to ensure broad browser compatibility.
Browsers/OSes Affected:
The issue primarily occurs on mobile devices:
Browsers: Chrome (v118) and Safari (v17).
Operating Systems: Android 13 and iOS 17.
On desktop browsers (e.g., Chrome and Firefox on Windows 11 and macOS Ventura), the rendering appears correct.
Clarification on “Embedding”:
I meant that the CSS refers to the hosted font files via @font-face, not embedding fonts directly into documents. Apologies for the confusion.
Additional Notes:
The website’s text content is encoded in UTF-8.
I’ve ensured the font files contain the required OpenType features (like GSUB and GPOS tables) for proper shaping and positioning, especially for Arabic and Hindi scripts.
From your explanation, it sounds like the issue could stem from the font rendering engine or the browser/OS support for these specific scripts. Could you recommend any tools or tests to identify whether the problem is with the fonts, encoding, or browser compatibility?
Thanks again for your help! I look forward to your suggestions.
To troubleshoot your specific scenario we’d need your font files, your CSS, and a bunch of time. Since these are not SIL fonts we’re not able to offer lengthy support. Here are some things you can try:
Try only loading one font format (WOFF2 recommended, as it’s widely supported). This can avoid confusion, and let you test each format with each target browser separately.
If you’re not preloading your self-hosted fonts try doing that.
Swap out your font with one that is known to work well, such as those from Google Fonts. You can also try ours. This may help you isolate whether the problem is with the font or something else.