diff --git a/src/material/schematics/ng-add/fonts/material-fonts.ts b/src/material/schematics/ng-add/fonts/material-fonts.ts
index 213ddc911b8a..e3285afabe87 100644
--- a/src/material/schematics/ng-add/fonts/material-fonts.ts
+++ b/src/material/schematics/ng-add/fonts/material-fonts.ts
@@ -20,8 +20,8 @@ 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/icon?family=Material+Icons',
+      'https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap',
+      'https://fonts.googleapis.com/icon?family=Material+Icons&display=block',
     ];
 
     fonts.forEach(f => {
diff --git a/src/material/schematics/ng-add/index.spec.ts b/src/material/schematics/ng-add/index.spec.ts
index ce3db6afcda2..20ff34913efb 100644
--- a/src/material/schematics/ng-add/index.spec.ts
+++ b/src/material/schematics/ng-add/index.spec.ts
@@ -120,9 +120,9 @@ describe('ng-add schematic', () => {
     // the created links properly align with the existing HTML. Default CLI projects use an
     // indentation of two columns.
     expect(htmlContent).toContain(
-      '  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"');
+      '  <link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block"');
     expect(htmlContent).toContain(
-      '  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"');
+      '  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap"');
   });
 
   it('should add material app styles', () => {