Add woff2 web fonts

w311ang · Jun 4, 2023 · 2ff858b · 2ff858b
1 parent c33c1a2
commit 2ff858b
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 12 deletions.
diff --git a/src/Roboto.css b/src/Roboto.css
@@ -1,95 +1,119 @@
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
 
 /* 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;
 }
diff --git a/src/fonts/Roboto-Black.woff2 b/src/fonts/Roboto-Black.woff2
diff --git a/src/fonts/Roboto-BlackItalic.woff2 b/src/fonts/Roboto-BlackItalic.woff2
diff --git a/src/fonts/Roboto-Bold.woff2 b/src/fonts/Roboto-Bold.woff2
diff --git a/src/fonts/Roboto-BoldItalic.woff2 b/src/fonts/Roboto-BoldItalic.woff2
diff --git a/src/fonts/Roboto-Italic.woff2 b/src/fonts/Roboto-Italic.woff2
diff --git a/src/fonts/Roboto-Light.woff2 b/src/fonts/Roboto-Light.woff2
diff --git a/src/fonts/Roboto-LightItalic.woff2 b/src/fonts/Roboto-LightItalic.woff2
diff --git a/src/fonts/Roboto-Medium.woff2 b/src/fonts/Roboto-Medium.woff2
diff --git a/src/fonts/Roboto-MediumItalic.woff2 b/src/fonts/Roboto-MediumItalic.woff2
diff --git a/src/fonts/Roboto-Regular.woff2 b/src/fonts/Roboto-Regular.woff2
diff --git a/src/fonts/Roboto-Thin.woff2 b/src/fonts/Roboto-Thin.woff2
diff --git a/src/fonts/Roboto-ThinItalic.woff2 b/src/fonts/Roboto-ThinItalic.woff2