diff --git a/client/src/App.scss b/client/src/App.scss
index bf618bc5fdc38d0aa8aa123be7167f05b98eee77..47ae1ab1f4779f43f0213ed7794c140fcec7c317 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -8,6 +8,7 @@ html {
 
 body {
     color: settings.$body-color;
+    font-family: settings.$body-font;
     @include mixins.breakpoint(medium) {
         color: black;
     }
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 98248ae54c7a7dbfdc4d753bcec87225f3726aa5..a129833a541e84930eecd9f7bafc456cb4513f64 100644
--- a/client/src/index.tsx
+++ b/client/src/index.tsx
@@ -1,9 +1,11 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import App from 'App';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import reportWebVitals from './reportWebVitals';
+import 'styles/fonts.css';
 
 ReactDOM.render(
     <React.StrictMode>
diff --git a/client/src/styles/fonts.css b/client/src/styles/fonts.css
new file mode 100644
index 0000000000000000000000000000000000000000..9863ab89154f20b8fb8c079a2414abb9b1dbb372
--- /dev/null
+++ b/client/src/styles/fonts.css
@@ -0,0 +1,4 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+
diff --git a/client/src/styles/settings.scss b/client/src/styles/settings.scss
index 31d0fe07bbcc7bd660ebbb1aca2530d03203a7fc..710f0bc0e5c8de5d88c2930348a4095217c48e94 100644
--- a/client/src/styles/settings.scss
+++ b/client/src/styles/settings.scss
@@ -20,6 +20,7 @@ $linear-gradient: linear-gradient(to top, $primary, $secondary);
 $radial-gradient: radial-gradient(100% 115% at 0% 0%, $primary 0%, $secondary 100%);
 
 $body-color: #4B4B4B;
+$body-font: 'Poppins', sans-serif;
 
 // Typography
 $weight-light: 300;
@@ -28,7 +29,6 @@ $weight-medium: 500;
 $weight-semi-bold: 600;
 $weight-bold: 700;
 
-
 // Breakpoints
 $breakpoints: (
     'small': 360px,