Automatic Inlining of Fonts breaks in Angular 11

[glued]

🐞 bug report

Is this a regression?

Yes, the previous version in which this bug was not present was: 10

Description

This update to Angular 11 prevents our fonts from loading when linked from (fonts.google.com)

1. How can I turn off this feature?
2. Why is this enabled by default?
3. This seems like an unnecessary optimization for those who are using service worker cache.

in my index.html I have the following

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Roboto+Mono:400,500|Material+Icons&display=swap" rel="stylesheet"/>

That link goes to the following url

Which appears to be converted into the following when built for production:

<style type="text/css">
@font-face {
    font-family: "Roboto Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/robotomono/v12/L0x5DF4xlVMF-BfR8bXMIjhLq3-cXbKD.woff2)
      format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
      U+FEFF, U+FFFD;
  }
  .material-icons {
    font-family: "Material Icons";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
  }
</style>

Missing are the @font-face for Roboto and Material Icons.
Unclear how these are being evaluated but used you should also consider CSS custom variable assignments such as:

:root{
  --icon-font-family:'Material Icons';
}
.icon{
  font-family:var(--icon-font-family);
}

🔬 Minimal Reproduction

see above

🌍 Your Environment

Angular Version:

Angular CLI: 11.0.0
Node: 14.5.0
OS: darwin x64

Angular: 11.0.0
... animations, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.0
@angular-devkit/build-angular   0.1100.0
@angular-devkit/core            11.0.0
@angular-devkit/schematics      11.0.0
@angular/cdk                    10.2.7
@angular/fire                   6.0.5
@angular/material               10.2.7
@schematics/angular             11.0.0
@schematics/update              0.1100.0
ng-packagr                      11.0.1
rxjs                            6.6.3
typescript                      4.0.5

[glued]

Ah i found the document about how to turn this off...
https://angular.io/guide/workspace-config#optimization-and-source-map-configuration

but i would not recommend having this on by default, doesn't appear to work properly

[AndrewKushnir]

cc @alan-agius4