chore: add missing fonts (#21)

Signed-off-by: Jakob Steiner <jakob.steiner@glasskube.eu>

frontend/cloud-ui/src/app/components/nav-bar/nav-bar.component.html

@@ -23,7 +23,7 @@
         </button>
         <a href="/" class="flex ms-2 md:me-24">
           <img src="/glasskube-logo.svg" class="h-8 me-3" alt="Glasskube Logo" />
-          <h1 class="font-poppins self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
+          <h1 class="font-display self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
             Glasskube
           </h1>
         </a>

frontend/cloud-ui/src/styles.scss

@@ -3,8 +3,8 @@
 @tailwind components;
 @tailwind utilities;
 
+@import '@fontsource/inter/latin-300.css';
+@import '@fontsource/inter/latin-400.css';
+@import '@fontsource/inter/latin-600.css';
+@import '@fontsource/inter/latin-700.css';
 @import '@fontsource/poppins/latin-600.css';
-
-.font-poppins {
-  font-family: Poppins, Inter, system-ui, sans-serif;
-}

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser": "^19.0.0",
     "@angular/platform-browser-dynamic": "^19.0.0",
     "@angular/router": "^19.0.0",
+    "@fontsource/inter": "^5.1.0",
     "@fontsource/poppins": "^5.1.0",
     "flowbite": "^2.5.2",
     "posthog-js": "^1.187.0",

tailwind.config.js

@@ -3,6 +3,10 @@ module.exports = {
   content: ['./frontend/cloud-ui/src/**/*.{html,ts}', './frontend/cloud-ui/node_modules/flowbite/**/*.js'],
   theme: {
     extend: {},
+    fontFamily: {
+      sans: ['Inter', 'system-ui', 'sans-serif'],
+      display: ['Poppins', 'Inter', 'system-ui', 'sans-serif'],
+    },
   },
   plugins: [require('flowbite/plugin')],
 };