iOS 14.x Custom Font Issue

Question

Created Jan ’21

Replies 10

Boosts 1

Views 9.2k

Participants 9

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)

Boost

Answer 1

OP

Apple

Jan ’21

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

3

Answer 2

kypatterson OP

Jan ’21

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.

0

Answer 3

kypatterson OP

Jan ’21

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.

0

Answer 4

kypatterson OP

Jan ’21

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.

0

Answer 5

alexsou OP

Apr ’21

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.

0

Answer 6

clmartyr OP

Jul ’21

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.

0

Answer 7

Username1234567 OP

Jul ’21

Hallo Myles. Hallo Apple,

can you please answer the questions.

Thanks

0

Answer 8

danielehrhardt_codext OP

Jul ’21

Same problem here. I am using Angular.

0

Answer 9

shujahm OP

Aug ’21

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;
}

0

Answer 10

RedGravity OP

Sep ’23

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.

0