fonts and nav logo

vocodes/public/index.html

@@ -39,6 +39,7 @@
 
       gtag('config', 'UA-32811180-4');
     </script>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:ital,wght@0,300;0,400;1,300&family=Fugaz+One&family=Nunito&display=swap" rel="stylesheet"> 
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

vocodes/src/App.scss

@@ -78,9 +78,20 @@ footer {
 }
 
 nav {
-  font-family: $nav-font-family;
+  font-family: "Fugaz One";
   width: $page-width;
   text-align: justify;
+  #logo_text {
+    font-family: "Fugaz One";
+    font-size: 2.5em;
+    .vo {
+      color:  #209CEE;
+    }
+    .codes {
+      color:  rgba(32, 156, 238, 0.685);
+    }
+    margin-right: 0.5em;
+  }
   a,
   a:link {
     text-decoration: none;

vocodes/src/navigation/TopNav.tsx

@@ -9,6 +9,9 @@ interface Props {
 function TopNav(props: Props) {
   return (
     <nav>
+      <span id="logo_text">
+        <span className="vo">Vo</span><span className="codes">codes</span>
+      </span>
       <a href="#speak" onClick={() => props.switchModeCallback(Mode.SPEAK_MODE)}>Speak</a>
       <a href="#history" onClick={() => props.switchModeCallback(Mode.HISTORY_MODE)}>History</a>
       <a href="#use" onClick={() => props.switchModeCallback(Mode.ABOUT_MODE)}>About</a>