Merge pull request #105 from nostrband/feature/local-fonts

Feature/local fonts

public/index.html

@@ -10,12 +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 />
-    <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/index.css

@@ -1,17 +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;
-}
-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;
+  font-family: 'Inter', sans-serif;
 }
 
 html,

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

@@ -21,6 +21,7 @@ const commonTheme: Theme = createTheme({
       styleOverrides: {
         root: {
           textTransform: 'initial',
+          color: 'red',
         },
       },
     },
@@ -96,4 +97,6 @@ const darkTheme: Theme = createTheme({
   },
 })
 
+console.log(darkTheme)
+
 export { lightTheme, darkTheme }