feat(schematics): add font-display query (#16363)

Author: puku0x

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

@@ -20,7 +20,7 @@ export function addFontsToIndex(options: Schema): (host: Tree) => Tree {
     const projectIndexHtmlPath = getIndexHtmlPath(project);
 
     const fonts = [
-      'https://fonts.googleapis.com/css?family=Roboto:300,400,500',
+      'https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap',
       'https://fonts.googleapis.com/icon?family=Material+Icons',
     ];
 

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

@@ -132,7 +132,8 @@ describe('ng-add schematic', () => {
     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"');
+        .toContain(
+          '  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"');
   });
 
   it('should add material app styles', async () => {