diff --git a/index.html b/index.html
index a8b5645..9c7fd9e 100644
--- a/index.html
+++ b/index.html
@@ -39,7 +39,9 @@
         <!-- <link href="https://example.com/favicon.png" rel="icon" sizes="192x192"> -->
 
         <!-- Font preloads (should be done for each font file) -->
-        <link href="https://example.com/fonts/fontfam/font.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
+        <link href="public/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2" rel="preload" as="font" type="font/woff2" crossorigin="anonymous">
 
         <!-- CSS -->
         <link href="/src/style.css" rel="stylesheet" media="screen">
diff --git a/public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2 b/public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2
new file mode 100644
index 0000000..e9e305f
Binary files /dev/null and b/public/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2 differ
diff --git a/public/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2 b/public/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2
new file mode 100644
index 0000000..3fca26b
Binary files /dev/null and b/public/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2 differ
diff --git a/public/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2 b/public/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2
new file mode 100644
index 0000000..60409b2
Binary files /dev/null and b/public/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2 differ
diff --git a/public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2 b/public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2
new file mode 100644
index 0000000..df33f80
Binary files /dev/null and b/public/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2 differ
diff --git a/src/style.css b/src/style.css
index cdbaeec..5f61f2e 100644
--- a/src/style.css
+++ b/src/style.css
@@ -6,58 +6,26 @@
 
 @font-face {
   font-family: 'Roboto';
-  font-weight: 300;
+  font-weight: 100 900;
   font-style: normal;
   font-display: swap;
-  src: url('/fonts/roboto/roboto-latin-300-normal.woff2') format('woff2');
+  src: url('/fonts/roboto/Roboto-VariableFont_wdth-wght.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Roboto';
-  font-weight: 400;
-  font-style: normal;
+  font-weight: 100 900;
+  font-style: italic;
   font-display: swap;
-  src: url('/fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-weight: 500;
-  font-style: normal;
-  font-display: swap;
-  src: url('/fonts/roboto/roboto-latin-500-normal.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src: url('/fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto';
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-  src: url('/fonts/roboto/roboto-latin-900-normal.woff2') format('woff2');
+  src: url('/fonts/roboto/Roboto-Italic-VariableFont_wdth-wght.woff2') format('woff2');
 }
 
 @font-face {
   font-family: 'Roboto Slab';
-  font-weight: 400;
+  font-weight: 100 900;
   font-style: normal;
   font-display: swap;
-  src: url('/fonts/roboto-slab/roboto-slab-latin-400-normal.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Roboto Slab';
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src: url('/fonts/roboto-slab/roboto-slab-latin-700-normal.woff2') format('woff2');
+  src: url('/fonts/roboto-slab/RobotoSlab-VariableFont_wght.woff2') format('woff2');
 }
 
 @font-face {
@@ -65,7 +33,7 @@
   font-weight: 400;
   font-style: normal;
   font-display: block;
-  src: url('/fonts/material-icons-round/material-icons-round-all-400-normal.woff2') format('woff2');
+  src: url('/fonts/material-icons-round/material-icons-round-latin-400-normal.woff2') format('woff2');
 }
 
 /* ============================================================