add lato font

lib/utils/themes/fontFace.ts

@@ -0,0 +1,130 @@
+import { domain } from "../defineDomain";
+
+
+export const fontFaces = `
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-Thin.ttf);
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-ThinItalic.ttf);
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-ExtraLight.ttf);
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-ExtraLightItalic.ttf);
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-Light.ttf);
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-LightItalic.ttf);
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-Regular.ttf);
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-Italic.ttf);
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-Medium.ttf);
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-MediumItalic.ttf);
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-SemiBold.ttf);
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-SemiBoldItalic.ttf);
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-Bold.ttf);
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-BoldItalic.ttf);
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-ExtraBold.ttf);
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-ExtraBoldItalic.ttf);
+  font-weight: 800;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-Black.ttf);
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Lato';
+  src: url(${domain}/fonts/Lato-BlackItalic.ttf);
+  font-weight: 900;
+  font-style: italic;
+}
+`;

lib/utils/themes/generic.ts

@@ -1,4 +1,5 @@
-import {createTheme} from "@mui/material";
+import { createTheme } from "@mui/material";
+import { fontFaces } from "./fontFace";
 
 declare module '@mui/material/Button' {
     interface ButtonPropsVariantOverrides {
@@ -18,6 +19,14 @@ const theme = createTheme({
         },
     },
     components: {
+        MuiCssBaseline: {
+            styleOverrides: fontFaces,
+        },
+        MuiScopedCssBaseline: {
+            styleOverrides: {
+                root: fontFaces,
+            }
+        },
         MuiTypography: {
             defaultProps: {
                 variantMapping: {
@@ -29,7 +38,8 @@ const theme = createTheme({
             variants: [
                 {
                     props: {
-                        variant: 'contained' },
+                        variant: 'contained'
+                    },
                     style: {
                         backgroundColor: "#7E2AEA",
                         padding: '13px 20px',
@@ -44,7 +54,8 @@ const theme = createTheme({
                 },
                 {
                     props: {
-                        variant: 'outlined' },
+                        variant: 'outlined'
+                    },
                     style: {
                         backgroundColor: "#F2F3F7",
                         padding: '10px 20px',
@@ -89,12 +100,10 @@ const theme = createTheme({
             fontWeight: 500,
         },
         fontFamily: [
-            '"Helvetica Neue"',
             "Twemoji Country Flags",
-            "Rubik",
+            '"Lato"',
             "-apple-system",
             "BlinkMacSystemFont",
-            '"Segoe UI"',
             "Arial",
             "sans-serif",
             '"Apple Color Emoji"',

public/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
-    <title>Pena Quiz</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-  </body>
-</html>