Font Issue with Embedded Google Sheets Charts on Mobile Browsers (Webflow)

Hi everyone,

I’m experiencing an issue with fonts not rendering correctly when embedding Google Sheets charts into my Webflow project, but the issue only occurs on mobile browsers (Chrome and Safari).

The Problem:

  • I’ve assigned the fonts ‘Wide’ and ‘Arial’ in Google Sheets for my charts.
  • On desktop browsers, everything looks fine, but on mobile devices, the font Wide is replaced with the default ‘Times’ or something.
  • This issue appears on both iOS and Android devices.

Solutions I’ve Tried So Far:

  1. Adding Fonts in Webflow:
  • I checked the inspector on the google sheets. The font is called ‘google sans’. Added a custom font ‘open sans’ in the font settings and called it ‘google sans’ but nothing happened.
  1. Custom CSS Targeting Mobile Devices:
    I added the following CSS in the Before </body> tag section in Webflow:
@media screen and (max-width: 768px) {
    iframe {
        font-family: Arial, sans-serif !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

However, the fonts are still not displaying correctly on mobile.
3. Inline CSS in Embed Code:
I modified the Google Sheets embed code like this to force the font styling:

<iframe src="YOUR_GOOGLE_SHEETS_URL" 
        style="font-family: Arial, sans-serif !important; width: 100%; height: 500px;">
</iframe>

Didn’t work.

  1. Testing in Incognito Mode and Clearing Cache:
    I cleared my browser cache and tested in Incognito Mode, but the issue persists.

I’m hoping to get advice from anyone who has encountered similar font rendering issues with embedded content in Webflow on mobile devices.

  • Could this be a Google Sheets limitation on mobile?
  • Is there a workaround to force Webflow to load the correct fonts for the iframe? I don’t want to use the ‘image’ option in google sheets, that’s my last resort.
  • Any other troubleshooting steps I should try?

Thanks in advance for any suggestions!


Site: https://vdbron-test-dashboard.webflow.io/