fix: load fonts on web

upryzing · Apr 11, 2024 · d357ee4 · d357ee4
1 parent 42a4831
commit d357ee4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 6 deletions.
diff --git a/index.web.js b/index.web.js
@@ -9,10 +9,52 @@ import './i18n/i18n';
 
 import {name as appName} from './app.json';
 
+import Inter from './assets/fonts/Inter/Inter.ttf';
+import InterBold from './assets/fonts/Inter/Inter_Bold.ttf';
+import JetBrainsMono from './assets/fonts/JetBrains Mono/JetBrains Mono.ttf';
+import JetBrainsMonoBold from './assets/fonts/JetBrains Mono/JetBrains Mono_Bold.ttf';
+import OpenSans from './assets/fonts/Open Sans/Open Sans.ttf';
+import OpenSansBold from './assets/fonts/Open Sans/Open Sans_bold.ttf';
+
 import MaterialIconFont from 'react-native-vector-icons/Fonts/MaterialIcons.ttf';
 import MaterialCommunityIconFont from 'react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf';
 
-const iconFontStyles = `@font-face {
+const fontStyles = `
+@font-face {
+    src: url(${Inter});
+    font-family: 'Inter';
+}
+
+@font-face {
+    src: url(${InterBold});
+    font-family: 'Inter';
+    font-weight: bold;
+}
+
+@font-face {
+    src: url(${JetBrainsMono});
+    font-family: 'JetBrains Mono';
+}
+
+@font-face {
+    src: url(${JetBrainsMonoBold});
+    font-family: 'JetBrains Mono';
+    font-weight: bold;
+}
+
+@font-face {
+    src: url(${OpenSans});
+    font-family: 'Open Sans';
+    font-weight: normal;
+}
+
+@font-face {
+    src: url(${OpenSansBold});
+    font-family: 'Open Sans';
+    font-weight: bold;
+}
+
+@font-face {
     src: url(${MaterialCommunityIconFont});
     font-family: MaterialCommunityIcons;
 }
@@ -28,9 +70,9 @@ style.type = 'text/css';
 
 // Append the iconFontStyles to the stylesheet
 if (style.styleSheet) {
-  style.styleSheet.cssText = iconFontStyles;
+  style.styleSheet.cssText = fontStyles;
 } else {
-  style.appendChild(document.createTextNode(iconFontStyles));
+  style.appendChild(document.createTextNode(fontStyles));
 }
 
 // Inject the stylesheet into the document head

diff --git a/webpack.config.js b/webpack.config.js
@@ -65,10 +65,13 @@ const vectorLoaderConfiguration = {
   ],
 };
 
-const vectorIconLoaderConfiguration = {
+const fontLoaderConfiguration = {
   test: /\.ttf$/,
   loader: 'url-loader',
-  include: path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
+  include: [
+    path.resolve(__dirname, 'assets/fonts'),
+    path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
+  ]
 };
 
 module.exports = {
@@ -90,9 +93,9 @@ module.exports = {
   module: {
     rules: [
       babelLoaderConfiguration,
+      fontLoaderConfiguration,
       imageLoaderConfiguration,
       vectorLoaderConfiguration,
-      vectorIconLoaderConfiguration,
     ],
   },
   plugins: [