fix(docs-infra): add fallback to web fonts so downloading does not bl…

…ock rendering (#35352)

Light house was reporting that 'Ensure text remains visible during webfont load' solution to this problem was adding &swap to the end of web fonts this leads to our first text showing before web-font download and improves the performance of site link to article: https://web.dev/font-display/\?utm_source\=lighthouse\&utm_medium\=lr

PR Close #35352

aio/src/index.html

@@ -20,9 +20,9 @@
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png">
 
   <!-- NOTE: These need to be kept in sync with `ngsw-config.json`. -->
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono&display=swap">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
   <!-- -->
 
   <link rel="manifest" href="pwa-manifest.json">