Add woff2 web fonts

src/Roboto.css

@@ -1,7 +1,9 @@
 /* Roboto Thin */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Thin'), url('./fonts/Roboto-Thin.ttf') format('truetype');
+  src: local('Roboto Thin'),
+    url('./fonts/Roboto-Thin.woff2') format('woff2'),
+    url('./fonts/Roboto-Thin.ttf') format('truetype');
   font-weight: 100;
   font-style: normal;
 }
@@ -9,7 +11,9 @@
 /* Roboto Thin Italic */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Thin Italic'), url('./fonts/Roboto-ThinItalic.ttf') format('truetype');
+  src: local('Roboto Thin Italic'),
+    url('./fonts/Roboto-ThinItalic.woff2') format('woff2'),
+    url('./fonts/Roboto-ThinItalic.ttf') format('truetype');
   font-weight: 100;
   font-style: italic;
 }
@@ -17,7 +21,9 @@
 /* Roboto Light */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Light'), url('./fonts/Roboto-Light.ttf') format('truetype');
+  src: local('Roboto Light'),
+    url('./fonts/Roboto-Light.woff2') format('woff2'),
+    url('./fonts/Roboto-Light.ttf') format('truetype');
   font-weight: 300;
   font-style: normal;
 }
@@ -25,7 +31,9 @@
 /* Roboto Light Italic */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Light Italic'), url('./fonts/Roboto-LightItalic.ttf') format('truetype');
+  src: local('Roboto Light Italic'),
+    url('./fonts/Roboto-LightItalic.woff2') format('woff2'),
+    url('./fonts/Roboto-LightItalic.ttf') format('truetype');
   font-weight: 300;
   font-style: italic;
 }
@@ -33,7 +41,9 @@
 /* Roboto Regular */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto'), url('./fonts/Roboto-Regular.ttf') format('truetype');
+  src: local('Roboto'),
+    url('./fonts/Roboto-Regular.woff2') format('woff2'),
+    url('./fonts/Roboto-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
@@ -41,7 +51,9 @@
 /* Roboto Italic */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Italic'), url('./fonts/Roboto-Italic.ttf') format('truetype');
+  src: local('Roboto Italic'),
+    url('./fonts/Roboto-Italic.woff2') format('woff2'),
+    url('./fonts/Roboto-Italic.ttf') format('truetype');
   font-weight: 400;
   font-style: italic;
 }
@@ -49,7 +61,9 @@
 /* Roboto Medium */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Medium'), url('./fonts/Roboto-Medium.ttf') format('truetype');
+  src: local('Roboto Medium'),
+    url('./fonts/Roboto-Medium.woff2') format('woff2'),
+    url('./fonts/Roboto-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
 }
@@ -57,7 +71,9 @@
 /* Roboto Medium Italic */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Medium Italic'), url('./fonts/Roboto-MediumItalic.ttf') format('truetype');
+  src: local('Roboto Medium Italic'),
+    url('./fonts/Roboto-MediumItalic.woff2') format('woff2'),
+    url('./fonts/Roboto-MediumItalic.ttf') format('truetype');
   font-weight: 500;
   font-style: italic;
 }
@@ -65,7 +81,9 @@
 /* Roboto Bold */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Bold'), url('./fonts/Roboto-Bold.ttf') format('truetype');
+  src: local('Roboto Bold'),
+    url('./fonts/Roboto-Bold.woff2') format('woff2'),
+    url('./fonts/Roboto-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
 }
@@ -73,7 +91,9 @@
 /* Roboto Bold Italic */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Bold Italic'), url('./fonts/Roboto-BoldItalic.ttf') format('truetype');
+  src: local('Roboto Bold Italic'),
+    url('./fonts/Roboto-BoldItalic.woff2') format('woff2'),
+    url('./fonts/Roboto-BoldItalic.ttf') format('truetype');
   font-weight: 700;
   font-style: italic;
 }
@@ -81,7 +101,9 @@
 /* Roboto Black */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Black'), url('./fonts/Roboto-Black.ttf') format('truetype');
+  src: local('Roboto Black'),
+    url('./fonts/Roboto-Black.woff2') format('woff2'),
+    url('./fonts/Roboto-Black.ttf') format('truetype');
   font-weight: 900;
   font-style: normal;
 }
@@ -89,7 +111,9 @@
 /* Roboto Black Italic */
 @font-face {
   font-family: 'Roboto';
-  src: local('Roboto Black Italic'), url('./fonts/Roboto-BlackItalic.ttf') format('truetype');
+  src: local('Roboto Black Italic'),
+    url('./fonts/Roboto-BlackItalic.woff2') format('woff2'),
+    url('./fonts/Roboto-BlackItalic.ttf') format('truetype');
   font-weight: 900;
   font-style: italic;
 }