add local fonts

package-lock.json

@@ -10,7 +10,6 @@
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
-        "@fontsource/inter": "^5.0.16",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.14.19",
         "@mui/material": "^5.14.20",
@@ -2743,11 +2742,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
-    "node_modules/@fontsource/inter": {
-      "version": "5.0.16",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.16.tgz",
-      "integrity": "sha512-qF0aH5UiZvCmneX5orJbVRoc2VTyLTV3X/7laMp03Qt28L+B9tFlZODOGUL64wDWc69YVdi1LeJB0cIgd51lvw=="
-    },
     "node_modules/@hookform/resolvers": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",
@@ -20175,11 +20169,6 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
-    "@fontsource/inter": {
-      "version": "5.0.16",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.16.tgz",
-      "integrity": "sha512-qF0aH5UiZvCmneX5orJbVRoc2VTyLTV3X/7laMp03Qt28L+B9tFlZODOGUL64wDWc69YVdi1LeJB0cIgd51lvw=="
-    },
     "@hookform/resolvers": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz",

package.json

@@ -5,7 +5,6 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@fontsource/inter": "^5.0.16",
     "@hookform/resolvers": "^3.3.4",
     "@mui/icons-material": "^5.14.19",
     "@mui/material": "^5.14.20",

public/index.html

@@ -10,8 +10,6 @@
     <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.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 />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/assets/fonts/index.ts

@@ -1,30 +0,0 @@
-import pathExtraLight from './Inter/Inter-ExtraLight.ttf'
-import pathLight from './Inter/Inter-Light.ttf'
-import pathRegular from './Inter/Inter-Regular.ttf'
-import pathMedium from './Inter/Inter-Medium.ttf'
-import pathSemiBold from './Inter/Inter-SemiBold.ttf'
-import pathBold from './Inter/Inter-Bold.ttf'
-
-const createFont = (name: string, style: string, weight: number, url: string) => {
-  return {
-    fontFamily: name,
-    fontStyle: style,
-    fontDisplay: 'swap',
-    fontWeight: `${weight}`,
-    src: `
-    local(${name}),
-    url(${url}) format('woff2')
-  `,
-    unicodeRange:
-      ' U+0000-00FF, U+0100-017F, U+0180-024F, U+0250-02AF, U+02B0-02FF, U+0300-036F, U+0370-03FF, U+0400-04FF, U+1F00-1FFF',
-  }
-}
-
-const InterExtraLight = createFont('Inter', 'normal', 200, pathExtraLight)
-const InterLight = createFont('Inter', 'normal', 300, pathLight)
-const InterRegular = createFont('Inter', 'normal', 400, pathRegular)
-const InterMedium = createFont('Inter', 'normal', 500, pathMedium)
-const InterSemiBold = createFont('Inter', 'normal', 600, pathSemiBold)
-const InterBold = createFont('Inter', 'normal', 700, pathBold)
-
-export { InterExtraLight, InterLight, InterRegular, InterMedium, InterSemiBold, InterBold }

src/index.css

@@ -1,7 +1,63 @@
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter ExtraLight'),
+    local('Inter-ExtraLight'),
+    url('./assets/fonts/Inter/Inter-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Light'),
+    local('Inter-Light'),
+    url('./assets/fonts/Inter/Inter-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Regular'),
+    local('Inter-Regular'),
+    url('./assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Medium'),
+    local('Inter-Medium'),
+    url('./assets/fonts/Inter/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter SemiBold'),
+    local('Inter-SemiBold'),
+    url('./assets/fonts/Inter/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src:
+    local('Inter Bold'),
+    local('Inter-Bold'),
+    url('./assets/fonts/Inter/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-display: swap;
+}
+
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: 'Inter', sans-serif;
 }
 
 html,

src/modules/theme/theme.ts

@@ -1,13 +1,4 @@
-import { InterExtraLight, InterLight, InterRegular, InterMedium, InterSemiBold, InterBold } from '@/assets/fonts'
 import { createTheme, Theme } from '@mui/material'
-// import '@fontsource/inter'
-// import '@fontsource/inter/300.css'
-// import '@fontsource/inter' // Defaults to weight 400
-// import '@fontsource/inter/500.css'
-// import '@fontsource/inter/600.css'
-// import '@fontsource/inter/700.css'
-// import '@fontsource/inter/800.css'
-// import '@fontsource/inter/900.css'
 
 declare module '@mui/material/styles' {
   interface Palette {
@@ -26,13 +17,6 @@ const commonTheme: Theme = createTheme({
     fontFamily: ['Inter', 'sans-serif'].join(','),
   },
   components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        '@global': {
-          '@font-face': [InterExtraLight, InterLight, InterRegular, InterMedium, InterSemiBold, InterBold],
-        },
-      },
-    },
     MuiButton: {
       styleOverrides: {
         root: {

src/types/index.d.ts

@@ -1 +0,0 @@
-declare module '*.ttf'