diff --git a/hooks/post_gen_project.py b/hooks/post_gen_project.py
index 125d4242a..55cbaad04 100644
--- a/hooks/post_gen_project.py
+++ b/hooks/post_gen_project.py
@@ -112,6 +112,22 @@ def remove_expo_yaml_files():
             remove(file_name)
 
 
+def add_fonts_to_web():
+    move(join("resources", "web", "fonts"), join("client", "src", "assets"))
+
+
+def clean_up_web_resources():
+    rmtree(join("resources", "web"))
+
+
+def add_fonts_to_mobile():
+    move(join("resources", "mobile", "fonts"), join("mobile", "assets"))
+
+
+def clean_up_mobile_resources():
+    rmtree(join("resources", "mobile"))
+
+
 def set_keys_in_envs(django_secret, postgres_secret):
     env_file_path = join(".env.example")
     pull_request_template_path = join(".github", "pull_request_template.md")
@@ -150,22 +166,29 @@ def get_secrets():
 def main():
     django_secret, postgres_secret = get_secrets()
     set_keys_in_envs(django_secret, postgres_secret)
-
+    has_web = "{{ cookiecutter.client_app }}".lower() == "vue3" or "{{ cookiecutter.client_app }}".lower() == "react"
     if "{{ cookiecutter.client_app }}".lower() == "none":
         rmtree(web_clients_path)
         remove(join("package.json"))
     elif "{{ cookiecutter.client_app }}".lower() == "vue3":
         remove_web_client_files("react")
         move_web_client_to_root("vue3")
+        # add_fonts_to_web()
     elif "{{ cookiecutter.client_app }}".lower() == "react":
         remove_web_client_files("vue3")
         move_web_client_to_root("react")
+        # add_fonts_to_web()
+    if has_web:
+        add_fonts_to_web()
     if "{{ cookiecutter.include_mobile }}".lower() == "y":
         move_mobile_client_to_root("react-native")
+        add_fonts_to_mobile()
     else:
         remove_expo_yaml_files()
 
     clean_up_clients_folder()
+    clean_up_mobile_resources()
+    clean_up_web_resources()
 
     print_thankyou()
     print(f"\n{SUCCESS}Awesome! Project initialized...{END}\n")
diff --git a/{{cookiecutter.project_slug}}/clients/web/react/src/index.css b/{{cookiecutter.project_slug}}/clients/web/react/src/index.css
index b5c61c956..f10c3e975 100644
--- a/{{cookiecutter.project_slug}}/clients/web/react/src/index.css
+++ b/{{cookiecutter.project_slug}}/clients/web/react/src/index.css
@@ -1,3 +1,24 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/*TODO: Add your own custom fonts for the project. Make sure you also update the entry in tailwind.config.js to match the font family you use*/
+@layer base {
+  @font-face {
+    font-family: 'Montserrat';
+    font-display: swap;
+    font-style: italic;
+    src:
+      url('assets/fonts/montserrat-italic-variable.woff2') format('woff2'),
+      url('assets/fonts/montserrat-italic-variable.woff') format('woff');
+  }
+
+  @font-face {
+    font-family: 'Montserrat';
+    font-display: swap;
+    font-style: normal;
+    src:
+      url('assets/fonts/montserrat-variable.woff2') format('woff2'),
+      url('assets/fonts/montserrat-variable.woff') format('woff');
+  }
+}
\ No newline at end of file
diff --git a/{{cookiecutter.project_slug}}/clients/web/react/tailwind.config.js b/{{cookiecutter.project_slug}}/clients/web/react/tailwind.config.js
index 72cbfc127..e18d2e6f3 100644
--- a/{{cookiecutter.project_slug}}/clients/web/react/tailwind.config.js
+++ b/{{cookiecutter.project_slug}}/clients/web/react/tailwind.config.js
@@ -1,4 +1,5 @@
 const { colors } = require('./tailwind.colors')
+const defaultTheme = require('tailwindcss/defaultTheme')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -6,9 +7,8 @@ module.exports = {
   theme: {
     extend: {
       colors,
-      fontFamily: {
-        avenir: ['Avenir', 'Helvetica', 'Arial', 'sans-serif'],
-      },
+      //TODO: match font family from index.css @font-face directive
+      fontFamily: { sans: ['Montserrat', ...defaultTheme.fontFamily.sans] },
     },
     container: {
       padding: {
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Black.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Black.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Black.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Black.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-BlackItalic.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-BlackItalic.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-BlackItalic.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-BlackItalic.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Bold.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Bold.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Bold.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Bold.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-BoldItalic.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-BoldItalic.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-BoldItalic.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-BoldItalic.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Italic.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Italic.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Italic.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Italic.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Light.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Light.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Light.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Light.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-LightItalic.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-LightItalic.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-LightItalic.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-LightItalic.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Medium.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Medium.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Medium.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Medium.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-MediumItalic.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-MediumItalic.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-MediumItalic.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-MediumItalic.ttf
diff --git a/{{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Regular.ttf b/{{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Regular.ttf
similarity index 100%
rename from {{cookiecutter.project_slug}}/clients/mobile/react-native/assets/fonts/Montserrat-Regular.ttf
rename to {{cookiecutter.project_slug}}/resources/mobile/fonts/Montserrat-Regular.ttf
diff --git a/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-italic-variable.woff b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-italic-variable.woff
new file mode 100644
index 000000000..5065394d4
Binary files /dev/null and b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-italic-variable.woff differ
diff --git a/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-italic-variable.woff2 b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-italic-variable.woff2
new file mode 100644
index 000000000..1d9dc76f1
Binary files /dev/null and b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-italic-variable.woff2 differ
diff --git a/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-variable.woff b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-variable.woff
new file mode 100644
index 000000000..4d9427bce
Binary files /dev/null and b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-variable.woff differ
diff --git a/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-variable.woff2 b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-variable.woff2
new file mode 100644
index 000000000..950d536de
Binary files /dev/null and b/{{cookiecutter.project_slug}}/resources/web/fonts/montserrat-variable.woff2 differ