diff --git a/frontend/src/assets/fonts/Roboto.scss b/frontend/src/assets/fonts/Roboto.scss
index 076472b9f0..8c6b4e3e0e 100644
--- a/frontend/src/assets/fonts/Roboto.scss
+++ b/frontend/src/assets/fonts/Roboto.scss
@@ -1,7 +1,17 @@
+@font-face {
+  font-family: Roboto;
+  src: url("./Roboto/RobotoFlex-Regular.ttf");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap
+}
+
+
 
 @font-face {
   font-family: Roboto;
-  src: url('./Roboto/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].ttf') format('truetype');
+  src: url('./Roboto/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
+  font-display: swap;
 }
diff --git a/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.ttf b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.ttf
new file mode 100644
index 0000000000..6cf3b2a47c
Binary files /dev/null and b/frontend/src/assets/fonts/Roboto/RobotoFlex-Regular.ttf differ
diff --git a/frontend/src/assets/fonts/Roboto/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].ttf b/frontend/src/assets/fonts/Roboto/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf
similarity index 100%
rename from frontend/src/assets/fonts/Roboto/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].ttf
rename to frontend/src/assets/fonts/Roboto/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf