feat(material/schematics): use newer Google Fonts version (#21479)

Switches the schematics, guides and internal dev apps to use the second version of the
Google Fonts loading snippet.

Fixes #21478.

Author: crisbeto

guides/typography.md

@@ -31,7 +31,8 @@ To get started, you first include the `Roboto` font with the 300, 400 and 500 we
 You can host it yourself or include it from [Google Fonts][2]:
 
 ```html
-<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.gstatic.com">
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
 ```
 
 Now you can add the appropriate CSS classes to the elements that you want to style:

src/dev-app/index.html

@@ -7,9 +7,10 @@
   <base href="/">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
 
   <script>
     if (window.customElements) {

src/e2e-app/index.html

@@ -7,8 +7,9 @@
   <base href="/">
 
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="theme.css" rel="stylesheet">
 
   <!-- FontAwesome for mat-icon demo. -->

src/material/schematics/ng-add/fonts/material-fonts.ts

@@ -26,14 +26,17 @@ export function addFontsToIndex(options: Schema): Rule {
       throw new SchematicsException('No project index HTML file could be found.');
     }
 
+    const preconnect = `<link rel="preconnect" href="https://fonts.gstatic.com">`;
     const fonts = [
-      'https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap',
+      'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap',
       'https://fonts.googleapis.com/icon?family=Material+Icons',
     ];
 
-    fonts.forEach(f => {
-      projectIndexFiles.forEach(indexFilePath => {
-        appendHtmlElementToHead(host, indexFilePath, `<link href="${f}" rel="stylesheet">`);
+    projectIndexFiles.forEach(indexFilePath => {
+      appendHtmlElementToHead(host, indexFilePath, preconnect);
+
+      fonts.forEach(font => {
+        appendHtmlElementToHead(host, indexFilePath, `<link href="${font}" rel="stylesheet">`);
       });
     });
   };

src/material/schematics/ng-add/index.spec.ts

@@ -151,11 +151,13 @@ describe('ng-add schematic', () => {
       // Ensure that the indentation has been determined properly. We want to make sure that
       // the created links properly align with the existing HTML. Default CLI projects use an
       // indentation of two columns.
+      expect(htmlContent)
+        .toContain('  <link rel="preconnect" href="https://fonts.gstatic.com">');
       expect(htmlContent)
         .toContain('  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"');
       expect(htmlContent)
-        .toContain(
-          '  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"');
+        .toContain('  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@' +
+                   '300;400;500&display=swap"');
     });
   });
 

src/universal-app/index.html

@@ -5,8 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Angular Material Universal Kitchen Sink Test</title>
   <link href="theme.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <base href="/">
 
   <style>