Google Fonts not loading after upgrade to 12.2.0 from 11.2.14 #21550
Description
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
After upgrading from 11.2.14 to 12.2.0, Google Fonts will no longer load.
In styles.scss, I have:
@import url("./assets/stylesheets/fonts.css");
@import url("./assets/stylesheets/forms.css");
@import url("./assets/stylesheets/style.css");
In fonts.css, I have:
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap");
The above @Import lines were copied directly from Google Fonts website.
I was able to change the above lines to the old format, like this:
@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900");
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Anton&display=swap");
that prevented the errors, but the fonts still didn't load.
I ended up having to add these lines to the <head> of the index.html file to get the fonts to load.
<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=Anton&family=Open+Sans:ital,wght@0,400;0,700;1,600&family=Roboto:wght@100;400;500;700;900&display=swap" rel="stylesheet" />
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
> ng build --configuration production
✔ Browser application bundle generation complete.
✔ Copying assets complete.
⠋ Generating index html...2 rules skipped due to selector errors:
300;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans@400;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Anton&display=swap); -> Unmatched selector: ;400;500;700;900&display=swap);@import url(https://fonts.googleapis.com/css2?family=Open+Sans@400;600;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Anton&display=swap);
.custom-file-input:lang(en)~.custom-file-label -> unmatched pseudo-class :lang
✔ Index html generation complete.
Please provide the environment you discovered this bug in
Angular CLI: 12.2.0
Node: 14.17.0
Package Manager: npm 6.14.7
OS: win32 x64
Angular: 12.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... google-maps, localize, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1102.14
@angular-devkit/build-angular 12.2.0
@angular-devkit/core 11.2.14
@angular-devkit/schematics 11.2.14
@schematics/angular 11.2.14
rxjs 6.6.7
typescript 4.3.5
Anything else?
After the upgrade, I got build errors from Css Minimizer:
Error: PostCSS plugin postcss-discard-comments requires PostCSS 8.
so I npm install postcss -D (installed version is 8.3.6). Mentioning it here as that is the only other change.