trying add fonts locally

config-overrides.js

@@ -3,37 +3,37 @@ const path = require('path')
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin')
 
 module.exports = function override(config) {
-	const fallback = config.resolve.fallback || {}
+  const fallback = config.resolve.fallback || {}
-	Object.assign(fallback, {
+  Object.assign(fallback, {
-		crypto: require.resolve('crypto-browserify'),
+    crypto: require.resolve('crypto-browserify'),
-		stream: require.resolve('stream-browserify'),
+    stream: require.resolve('stream-browserify'),
-		assert: require.resolve('assert'),
+    assert: require.resolve('assert'),
-		http: require.resolve('stream-http'),
+    http: require.resolve('stream-http'),
-		https: require.resolve('https-browserify'),
+    https: require.resolve('https-browserify'),
-		os: require.resolve('os-browserify'),
+    os: require.resolve('os-browserify'),
-		url: require.resolve('url'),
+    url: require.resolve('url'),
-	})
+  })
-	config.resolve.fallback = fallback
+  config.resolve.fallback = fallback
-	config.plugins = (config.plugins || []).concat([
+  config.plugins = (config.plugins || []).concat([
-		new webpack.ProvidePlugin({
+    new webpack.ProvidePlugin({
-			process: 'process/browser',
+      process: 'process/browser',
-			Buffer: ['buffer', 'Buffer'],
+      Buffer: ['buffer', 'Buffer'],
-		}),
+    }),
-	])
+  ])
-	config.module.rules.unshift({
+  config.module.rules.unshift({
-		test: /\.m?js$/,
+    test: /\.m?js$/,
-		resolve: {
+    resolve: {
-			fullySpecified: false, // disable the behavior
+      fullySpecified: false, // disable the behavior
-		},
+    },
-	})
+  })
-	// turns off the plugin that forbids importing from node_modules for the above-mentioned stuff
+  // turns off the plugin that forbids importing from node_modules for the above-mentioned stuff
-	config.resolve.plugins = config.resolve.plugins.filter((plugin) => {
+  config.resolve.plugins = config.resolve.plugins.filter((plugin) => {
-		return !(plugin instanceof ModuleScopePlugin)
+    return !(plugin instanceof ModuleScopePlugin)
-	})
+  })
 
-	config.resolve.alias = {
+  config.resolve.alias = {
-		'@': path.resolve(__dirname, 'src'),
+    '@': path.resolve(__dirname, 'src'),
-	}
+  }
 
-	return config
+  return config
 }

package-lock.json

@@ -10,6 +10,7 @@
       "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",
@@ -2742,6 +2743,11 @@
       "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",
@@ -20169,6 +20175,11 @@
       "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,6 +5,7 @@
   "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

@@ -12,10 +12,6 @@
     <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=Inter:wght@200;300;400;500;600;700&display=swap"
-      rel="stylesheet"
-    />
     <!--
       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

@@ -0,0 +1,30 @@
+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

@@ -3,16 +3,6 @@
   padding: 0;
   box-sizing: border-box;
 }
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
-    'Droid Sans', 'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
 
 html,
 body,

src/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import './index.css'
+import ThemeProvider from './modules/theme/ThemeProvider'
 import App from './App'
+import './index.css'
 import reportWebVitals from './reportWebVitals'
 import { swicRegister } from './modules/swic'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import { persistor, store } from './store'
-import ThemeProvider from './modules/theme/ThemeProvider'
 import { PersistGate } from 'redux-persist/integration/react'
 import { SnackbarProvider } from 'notistack'
 

src/modules/theme/theme.ts

@@ -1,4 +1,13 @@
+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 {
@@ -17,10 +26,18 @@ const commonTheme: Theme = createTheme({
     fontFamily: ['Inter', 'sans-serif'].join(','),
   },
   components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        '@global': {
+          '@font-face': [InterExtraLight, InterLight, InterRegular, InterMedium, InterSemiBold, InterBold],
+        },
+      },
+    },
     MuiButton: {
       styleOverrides: {
         root: {
           textTransform: 'initial',
+          color: 'red',
         },
       },
     },
@@ -96,4 +113,6 @@ const darkTheme: Theme = createTheme({
   },
 })
 
+console.log(darkTheme)
+
 export { lightTheme, darkTheme }

src/types/index.d.ts

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