Automatic inlining of fonts results in jagged fonts for Windows users

[oriondean]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, automatic inlining of fonts was introduced in Angular 11 (defaulted to on)

Description

Some Google fonts are rendering poorly for Windows users when automatic font inlining is turned on

🔬 Minimal Reproduction

Start up a new angular project, and add google open sans font into your index.html like so:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">

Set the font-family of text to 'Open Sans' and font size to 12px.
Build the project so that the font inlining happens, and serve the static bundle locally.
One quick example to do this is to run npx http-server dist/{PROJECT_NAME_HERE}
Notice that the rendered fonts look jagged and poor aliased.

If I turn off font-inlining and rebuild the font renders better:

🌍 Your Environment

Angular CLI: 12.2.13
Node: 15.3.0 (Unsupported)
Package Manager: npm 7.0.14
OS: win32 x64

Angular: 12.2.13
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.13
@angular-devkit/build-angular   12.2.13
@angular-devkit/core            12.2.13
@angular-devkit/schematics      12.2.13
@schematics/angular             12.2.13
rxjs                            6.6.7
typescript                      4.3.5

Anything else relevant?

Looking at how the build-time font inlining works, it's making a request at build time with a Mac OSX user-agent which returns a different set of fonts than if I hit the Google Fonts endpoint with a Windows user-agent. In my testing when I replaced the inlined styles with fonts inlined with a Windows user agent the fonts rendered fine.

[alan-agius4]

It appears that when using a Windows user-agent the woff2 font content size is about 1.7Kb larger. It doesn't appear to effect the font rendering on OSX in anyway.

@mgechev, has offered to reach out to the Chrome team to understand this problem a bit better.

[foo6]

Do you think this problem will be fixed?
We currently experiences the exact same problem and don't find a workaround excepted to not use the Optimization. It occurs for us exactly with the same font "Open Sans" and it's clearly noticeable for the same font size of 12px.

[alan-agius4]

@foo6, we have reached out the the Chrome team again to gather some more information and their recommended.

[angular-automatic-lock-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.}