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

Feature/local fonts

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
 }

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

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 }