UPD: Change default font to JetBrainsMono 🥰

src/assets/base.css

@@ -70,9 +70,11 @@
     * {
         @apply border-border;
     }
+
     body {
         @apply bg-background text-foreground;
     }
+
     @font-face {
         font-family: 'ProtoMono';
         src: url(fonts/Proto-Mono-Semi-Bold.otf);
@@ -82,6 +84,11 @@
         src: url(fonts/RenoMono.otf);
     }
 
+    @font-face {
+        font-family: 'JetBrainsMono';
+        src: url(fonts/JetBrainsMono[wght].ttf);
+    }
+
     @font-face {
         font-family: 'PixelLg';
         src: url(fonts/SG12.ttf);
@@ -103,6 +110,7 @@
     .font-size-gui-extra {
         font-size: 48px;
     }
+
     h1, h2, h3, h4, h5, h6 {
         @apply font-heading;
     }

src/components/device/DevicePreview.vue

@@ -3,10 +3,7 @@
     <div
       class="bg-contain bg-top bg-no-repeat h-full w-full relative"
       :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.2) 95%, black), url(${RenderNano})`}">
-      <div class="px-4 h-12 flex justify-between items-center">
-        <h2>
-          {{ $t('preview.title') }}
-        </h2>
+      <div class="px-4 h-12 flex justify-center items-center">
         <div v-if="store.selectedProfile" class="font-mono text-sm">
           <span class="text-muted-foreground">Profile: </span>
           <ScrambleText :text="store.selectedProfile.name" />

src/components/profile/ProfileButton.vue

@@ -117,7 +117,7 @@ const props = defineProps({
   },
   showId: {
     type: Boolean,
-    default: true,
+    default: false,
   },
   nameEditable: {
     type: Boolean,

tailwind.config.js

@@ -80,7 +80,7 @@ module.exports = {
         },
       },
       fontFamily: {
-        sans: ['RenoMono', 'sans-serif'],
+        sans: ['JetbrainsMono', 'sans-serif'],
         heading: ['ProtoMono', 'sans-serif']
       },
       animation: {