Forum Discussion

tdxkait's avatar
tdxkait
Copper Contributor
Mar 28, 2024

SPFx Web Part - Font not loading in iOS Sharepoint App

Hi,

 

I'm loading in an external .woff2 icon font using CSS @font-face into my SPFx web part. It's working without issue in every tested browser and the Android SharePoint app, but I'm having issues exclusively in the iOS SharePoint app.

 

When I navigate to the page with the web part in my dev site, it looks like normal web FOUC with the glyph names showing instead of the icons, except it stays like that and doesn't change when assets load.

 

 

When you hit the options (...) and select Refresh, it shows as expected from there

 

 

Navigate away from the page and then back again, and it's back to not displaying the font. It's consistently replicable, and only happening when viewing my site in the iOS app.

 

It's not the first issue I've got with rendering specifically in the iOS app, far from it, but this is the most visible issue that I've not been able to find a workaround for. It's definitely a dealbreaker before I move to prod.

 

I've tried using https://transfonter.org/ to convert the external font to base64 and included it inline in the CSS in my packaged app. This rules out any issue with the external CDN for the font, but made no difference to the issue.

 

Has anyone encountered anything similar, or know of a better way to ensure this font displays properly?

No RepliesBe the first to reply

Resources