iOS 14.x Custom Font Issue

We are having the below weird issue on 14.x devices

Issue : 
 
My application is a hybrid application. We have noticed an issue on 14.x related to loading the fonts mentioned in our CSS.

The font file is not getting loaded occasionally. We couldn't infer much what is hindering the font loading on 14.x.
In the previous version of iOS, this just works fine.
 
CSS:
 
@font-face{
 font-family: "custom-font";src: url("fonts/custom-font.woff2")format("woff2"),
 url("fonts/custom-font.woff")format("woff"),
 url("fonts/custom-font.ttf")format("truetype")
}
 
 
The above style sheet is linked to the page that we are loading.
 
Has anyone observed this issue on your project ? If so, please let us know the approach followed to resolve the same.
 
 
We also tried to follow the approach where the font file is loaded by native portion.

The below approach works fine on iPhone Simulator but not on device, no clue why it's so
 
Added the font to the App and the file is targeted properly (Fonts provided by application key is updated).

Ensure that the specific font is loaded and available using logs

Used the font family in our CSS (we don't have to load the font on WkWebView space)

Up vote post of mspathy Down vote post of mspathy
8.1k views
Posted by
mspathy
Reply
Add a Comment

Replies

Hi!

I'm an engineer who works on text and fonts on the WebKit team at Apple. It looks like you've discovered a bug. Font are definitely supposed to load consistently.

Do you have more information about where we could reproduce this problem? Do you have an app on the App Store where it occurs? Or maybe a sample project?

Thanks!
Myles
Posted by
MylesMaxfield
Post not yet marked as solved Up vote reply of MylesMaxfield Down vote reply of MylesMaxfield
Add a Comment
I am encountering a problem that could be the same bug, with custom fonts sometimes not loading in a WKWebView

It appears that in some cases, if a custom @font-face is declared but not actually used until after DOM load is finished -- i.e. it is only used in content added via javascript -- the font file is not actually fetched.

So, given this CSS:
Code Block css
@font-face {
    font-family: 'Foobar';
    src: url('fonts/some-font.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}


And given this HTML, inserted into the DOM after load via script:
Code Block html
<span style="font: 400 20px Foobar">text</span>


The result is -- sometimes -- the font is not rendered with the correct font face.
The behaviour is consistent by content, meaning we have two complex pages which use the same font-face in very similar content loaded by the same script -- on one page, it will load correctly, consistently -- on the other page it will fail to load, consistently.

Notes I can tell from a Safari debugger connected to the webview in simulator:

There is no attempt made to fetch the font file. Networking tab does not show it at all

The font rendering engine appears to be working as expected, for example after a delay of about 2 seconds it will fallback to another font and then display the text. If I add CSS "font-display: swap;" it will show the fallback font immediately.

In other words, the renderer behaves as if the font file HTTP fetch timed out waiting for a response; except that no actual attempt to fetch the file was actually made.

Of note, not all such loads are failing. We have some content where it works (consistently) and other content where it does not work (consistently), for no apparent reason. Which leads me to guess is some sort of timing issue -- if the font system asks for a font download at just the wrong time, it doesn't work.

Unfortunately I don't have a clear example to provide -- we don't maintain the app, we only provide content which is loaded into the WKWebView -- and it's very complicated content.
Posted by
kypatterson
Up vote reply of kypatterson Down vote reply of kypatterson
Add a Comment
Oh, one more thing -- I discovered a work-around. If I preload the font file, it works, i.e. if I add this to <head> in the html:
Code Block html
<link rel="preload" as="font" href="fonts/some-font.woff2">


Then everything works as expected.
Posted by
kypatterson
Up vote reply of kypatterson Down vote reply of kypatterson
Add a Comment
Sorry to keep posting but I'm finding more info as I test.

The problem can also occur with content that is in the initial DOM, if that content is not displayed until later on (due to script changing style/class). So the issue likely has nothing to do with initial DOM state, it has to do with whether the font face is utilized immediately or not until later.
Posted by
kypatterson
Up vote reply of kypatterson Down vote reply of kypatterson
Add a Comment
We have the same issue - 4 of 5 times, app using WKWebKit won't load fonts from local bundle (part of app works in browser with all files loaded from app bundle). Network activity shows that fonts are not loaded if they are used in non-static part of page.
Posted by
alexsou
Up vote reply of alexsou Down vote reply of alexsou
Add a Comment

Hi, I have the same problem with two of my PWAs. Every time a new version of my app is launched and the service workers reinstall de app, 1 of 4 times the app does not load the custom font, which have all the icons of my site. My site seems broken and buggy due to this iOS bug.

Using the suggestions, I added a div to the body with empty content and css styled with my custom font-family and the problem stopped or at least is not as frequent as before.

Posted by
clmartyr
Up vote reply of clmartyr Down vote reply of clmartyr
Add a Comment

Hallo Myles. Hallo Apple,

can you please answer the questions.

Thanks

Posted by
Username1234567
Up vote reply of Username1234567 Down vote reply of Username1234567
Add a Comment

Same problem here. I am using Angular.

Posted by
danielehrhardt_codext
Up vote reply of danielehrhardt_codext Down vote reply of danielehrhardt_codext
Add a Comment

I am also facing same issue, where I have packaged my Angular app using Apache Cordova. The same packaged build works fine on Android and renders all the fonts just fine but on iOS font-family is not applying for some reason.

Below is what works for browsers on Android but not on iOS somehow

body {
  font-family: 'Roboto', serif;
  font-size: 16px;
  overflow-y: auto;
}
Posted by
shujahm
Up vote reply of shujahm Down vote reply of shujahm
Add a Comment

Hi! Has anyone found a solution to this by now? I have the same problem, so it seems this issue has not yet been resolved.

Posted by
RedGravity
Up vote reply of RedGravity Down vote reply of RedGravity
Add a Comment