diff --git a/public/fonts/material-icons.woff2 b/public/fonts/material-icons.woff2
new file mode 100644
index 00000000..e968e5b2
Binary files /dev/null and b/public/fonts/material-icons.woff2 differ
diff --git a/src/views/components/common/Text/Text.tsx b/src/views/components/common/Text/Text.tsx
index f304e031..ee379e73 100644
--- a/src/views/components/common/Text/Text.tsx
+++ b/src/views/components/common/Text/Text.tsx
@@ -5,7 +5,7 @@ import fonts, { ISizes, IWeights } from 'src/views/styles/fonts.module.scss';
 import styles from './Text.module.scss';
 
 type Props = {
-    color?: keyof ISassColors & 'black';
+    color?: keyof ISassColors;
     weight: keyof IWeights;
     size: keyof ISizes;
     span?: boolean;
@@ -24,12 +24,14 @@ export default function Text(props: PropsWithChildren<Props>) {
     style.textAlign ??= props.align;
     style.color ??= colors?.[props.color ?? 'charcoal'];
     style.fontSize ??= fonts?.[props.size ?? 'medium'];
-    style.fontWeight ??= fonts?.[props.weight ?? 'bold'];
+    style.fontWeight ??= fonts?.[props.weight ?? 'regular'];
 
     if (props.span) {
-        <span className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
-            {props.children}
-        </span>;
+        return (
+            <span className={classNames(styles.text, props.className)} style={style} onClick={props.onClick}>
+                {props.children}
+            </span>
+        );
     }
 
     return (
diff --git a/src/views/styles/colors.module.scss b/src/views/styles/colors.module.scss
index 52408efa..ea9a238a 100644
--- a/src/views/styles/colors.module.scss
+++ b/src/views/styles/colors.module.scss
@@ -1,6 +1,7 @@
 $burnt_orange: #bf5700;
 $charcoal: #333f48;
 $white: #ffffff;
+$black: #000000;
 $tangerine: #f8971f;
 $sunshine: #ffd600;
 $cactus: #a6cd57;
@@ -14,6 +15,7 @@ $limestone: #d6d2c4;
     burnt_orange: $burnt_orange;
     charcoal: $charcoal;
     white: $white;
+    black: $black;
     tangerine: $tangerine;
     sunshine: $sunshine;
     cactus: $cactus;
diff --git a/src/views/styles/colors.module.scss.d.ts b/src/views/styles/colors.module.scss.d.ts
index 2a0007de..65cd47bd 100644
--- a/src/views/styles/colors.module.scss.d.ts
+++ b/src/views/styles/colors.module.scss.d.ts
@@ -6,6 +6,7 @@ export interface ISassColors {
     burnt_orange: string;
     charcoal: string;
     white: string;
+    black: string;
     tangerine: string;
     sunshine: string;
     cactus: string;
diff --git a/src/views/styles/fonts.module.scss b/src/views/styles/fonts.module.scss
index 5f9d6e24..0cbdea24 100644
--- a/src/views/styles/fonts.module.scss
+++ b/src/views/styles/fonts.module.scss
@@ -8,6 +8,15 @@
     }
 }
 
+/* fallback */
+@font-face {
+    font-family: 'Material Icons Round';
+    font-style: normal;
+    font-weight: 400;
+    font-display: block;
+    src: url('moz-extension://__MSG_@@extension_id__/fonts/material-icons.woff2') format('woff2');
+}
+
 $light: 300;
 $regular: 400;
 $medium: 500;