Resolve "fix custom local fonts load"

Closes #35 (closed)

src/css/custom.css

-/* stylelint-disable docusaurus/copyright-header */
-/**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
- */
-
-/******* google fonts imports *******/
-@import url('https://fonts.googleapis.com/css?family=Comfortaa:400,600,700');
-@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700');
-
-/* You can override the default Infima variables here. */
+/******** FONTS ********/
+@font-face {
+  font-family: 'comfortaa';
+    src: url('/static/fonts/comfortaa.woff2') format('woff2');
+    src: url('/static/fonts/comfortaa.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'montserrat';
+    src: url('/static/fonts/montserrat.woff2') format('woff2');
+    src: url('/static/fonts/montserrat.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'jetbrainsmono';
+    src: url('/static/fonts/jetbrainsmono.woff2') format('woff2');
+    src: url('/static/fonts/jetbrainsmono.woff') format('woff');
+}
+
+/* VARIABLES */
 :root {
   --ifm-color-primary: #000000;  
   --ifm-color-dark-green: #577018;
@@ -22,8 +34,9 @@
   --ifm-link-color: #E07931;
   --ifm-button-color: var(--ifm-color-primary);
   --ifm-code-font-size: 95%; 
-  --ifm-font-family-base: "Comfortaa", cursive;
-  --ifm-font-family: "Montserrat",  sans-serif; 
+  --ifm-font-family-base: "comfortaa", cursive;
+  --ifm-font-family: "montserrat", sans-serif;
+  --ifm-font-family-monospace: "jetbrainsmono", monospace;
   --ifm-container-width: 100%; 
   --ifm-container-max-width: 950px;
   --ifm-navbar-shadow: none;
@@ -51,23 +64,33 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 hgroup {
   font-family: var(--ifm-font-family-base);
   font-weight: 700;
+  font-size: larger;
 }
 
 p {
   font-family: var(--ifm-font-family);
-  font-weight: 500; 
+  font-weight: 500;
 }
 
 .button {
   margin: 10px;
- }
+}
 
 .button--beta {
   background-color: var(--ifm-color-dark-green);
   border-color: var(--ifm-color-dark-green);
- }
+}
 
-/************ Navbar style ***********/
+/******* table & ul montserra font *******/
+table td {
+  font-family: var(--ifm-font-family);
+}
+
+ul {
+  font-family: var(--ifm-font-family);
+}
+
+/************ NAVBAR STYLE ***********/
 .navbar {
   background-color: var(--ifm-color-light-green);
   --ifm-navbar-link-hover-color: var(--ifm-color-dark-green);
@@ -84,9 +107,9 @@ p {
   position: sticky; 
   top: 0;
   z-index: 1; 
- } 
+} 
 
-/************ main elements style***********/
+/************ MAIN ELEMENT STYLE ***********/
 .section-promises {
   padding: 4rem 0;
   width: 100%;
@@ -108,7 +131,7 @@ p {
   flex-direction: row-reverse;
 }
 
-/************ footer style ***********/
+/************ FOOTER STYLE ***********/
 
 a.footer__link-item:hover {
   color:  var(--ifm-color-frame);
@@ -130,8 +153,8 @@ a.footer__link-item:hover {
   font-family: var(--ifm-font-family);
 }
 
-/************ sub-footer style ***********/
+/************ SUB-FOOTER STYLE ***********/
 .footer__bottom {
   font-family: var(--ifm-font-family); 
   font-weight: 600;
-} 
+}