Add IBM Plex Sans font

services/webui/src/app/components/SideNav.vue

@@ -10,7 +10,7 @@
 			</button>
 		</div>
 		<nav class="fixed lg:relative inset-y-0 w-72 lg:w-64 xl:w-72 flex flex-col flex-shrink-0 bg-white shadow-lg z-50" :class="{'active': isOpen}">
-			<div class="brand">AUTOPLEX</div>
+			<div class="brand font-brand">AUTOPLEX</div>
 			<div class="mt-4 text-center">
 				<div class="user"><i class="fas opacity-40" :class="{'fa-user': !isAdmin, 'fa-user-tie': isAdmin}"></i></div>
 				<div class="font-black text-lg opacity-80">{{ userName }}</div>

services/webui/src/app/styles/index.css

@@ -1,3 +1,8 @@
+@font-face {
+	font-family: "IBM Plex Sans";
+	src: url("../assets/fonts/IBMPlexSans/IBMPlexSans-Thin.ttf");
+}
+
 @import '@fortawesome/fontawesome-free/css/all.css';
 @tailwind base;
 @tailwind components;

services/webui/src/app/views/Login.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="w-full sm:max-w-sm sm:mx-auto sm:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md">
-		<div class="text-center font-thin text-4xl py-4">AUTOPLEX</div>
+		<div class="text-center font-thin text-4xl py-4 font-brand">AUTOPLEX</div>
 		<div class="font-medium text-center text-xl">Sign in</div>
 		<form @submit.prevent="login">
 			<div class="space-y-4">

services/webui/src/app/views/Register.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="w-full sm:max-w-sm sm:mx-auto sm:my-auto p-6 space-y-4 bg-white rounded-lg shadow-md">
-		<div class="text-center font-thin text-4xl py-4">AUTOPLEX</div>
+		<div class="text-center font-thin text-4xl py-4 font-brand">AUTOPLEX</div>
 		<div class="font-medium text-center text-xl">Sign Up</div>
 		<form @submit.prevent="register">
 			<div class="space-y-4">

services/webui/tailwind.config.js

@@ -5,6 +5,9 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
+      fontFamily: {
+        "brand": ["IBM Plex Sans", "sans"]
+      },
       colors: {
         ui: {
           plexGray: "rgb(31, 35, 38)"