Font loading inconsistently fails since Angular 9 upgrade

[jinder]

🐞 Bug report

Command (mark with an x)

• [X ] build

Is this a regression?

Yes, was not happening in Angular 8.

Description

Since upgrading to Angular 9, I'm experiencing very strange behaviour with font loading in Chrome. Occasionally (and sadly inconsistently), the font is failing to load without error resulting in fallback to the system font.

The font will load sometimes on a refresh - even when loading a cached copy. A hard refresh will always fix the font loading, but the problem will reoccur after some time.

This has been next to impossible for me to reproduce consistently but occurs with this font: http://zavoloklom.github.io/material-design-iconic-font/

One thing I have noticed is that since Angular 9, fonts are now appearing in the Chrome Developer tools Sources panel when they never used to previously. Are there any recommendations for what I can do to get to the root cause of the issue?

🌍 Your Environment

Angular CLI: 9.0.2
Node: 12.13.0
OS: win32 x64

Angular: 9.0.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/build-webpack     0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cdk                      9.0.0
@angular/cli                      9.0.2
@ngtools/webpack                  9.0.2
@schematics/angular               8.0.0
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[alan-agius4]

Hi,

1) Are you consuming the font using a CDN or locally as an asset? 2) Does this issue happen on other browsers?

This seems related to a Chrome support issue: https://support.google.com/chrome/thread/2401045?hl=en

Unfortunately without a reproduction we will be unable to determine the cause of the issue.

[jinder]

The font is a local asset. I've mostly been trying Chrome and haven't seen it on other browsers yet - although the problem is intermittent.

I understand regarding the Chrome issue, but this has only started happening since Angular 9. So I think it's potentially a combination of the issue plus some change in the way Angular CLI/webpack is packaging the assets.

[alan-agius4]

@jinder does this happen on prod, dev or both builds?

[jinder]

Happens on localhost (ng serve) as well as deployed server production builds. Also happening on multiple developer machines (all Windows 10 + Chrome 80).

[jinder]

Closing as this seems to no longer be an issue. Perhaps fixed via a dependency update or a change to Chrome.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}