refactor: only use medium nerdfont

src/components/Music/SpotifyPlayer.tsx

@@ -128,7 +128,9 @@ const InnerSpotifyPlayer = (props: InnerKittyProps<typeof SpotifyPlayer>) => {
       {/* body */}
       <div className="overflow-hidden" style={{ gridArea: "2 / 2 / 3 / 4" }}>
         <span className="font-extrabold text-color6">
-          <span>{false ? "\udb81\udc0a " : "\udb80\udfe4 "}</span>
+          <span className="font-normal">
+            {false ? "\udb81\udc0a " : "\udb80\udfe4 "}
+          </span>
           {props.playing.item.name} ·{" "}
           {props.playing.item.artists.map((a) => a.name).join(", ")}
         </span>

src/components/Waybar/Widgets/WaybarBatteryWidget.tsx

@@ -39,7 +39,8 @@ export const WaybarBatteryWidget = (props: { frequency: number }) => {
       className="pl-[0.625rem] pr-3 text-[#1d7715]"
       tooltip={tooltip}
     >
-      {lerpIcon(ICONS, battery, 100)} {battery}%
+      <span className="font-normal">{lerpIcon(ICONS, battery, 100)}</span>{" "}
+      {battery}%
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarBrightnessWidget.tsx

@@ -34,7 +34,8 @@ export const WaybarBrightnessWidget = () => {
   return (
     <WaybarWidget className="pl-3 pr-[0.625rem]" tooltip={tooltip}>
       <span onWheel={handleScroll}>
-        {lerpIcon(ICONS, brightness, 100)} {brightness}%
+        <span className="font-normal">{lerpIcon(ICONS, brightness, 100)}</span>{" "}
+        {brightness}%
       </span>
     </WaybarWidget>
   );

src/components/Waybar/Widgets/WaybarCPUWidget.tsx

@@ -45,7 +45,7 @@ export const WaybarCPUWidget = (props: {
         </ul>
       }
     >
-       {totalUsage}%
+      <span className="font-normal"></span> {totalUsage}%
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarDiskWidget.tsx

@@ -21,7 +21,7 @@ export const WaybarDiskWidget = (props: {
         props.capacity
       }GiB on / (${usage}%)`}
     >
-      󰋊 {usage}%
+      <span className="font-normal">󰋊</span> {usage}%
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarHomeWidget.tsx

@@ -1,5 +1,7 @@
 import { WaybarWidget } from "../WaybarWidget";
 
 export const WaybarHomeWidget = () => (
-  <WaybarWidget className="text-[#407cdd]"></WaybarWidget>
+  <WaybarWidget className="text-[#407cdd]">
+    <span className="font-normal"></span>
+  </WaybarWidget>
 );

src/components/Waybar/Widgets/WaybarLockWidget.tsx

@@ -10,7 +10,7 @@ export const WaybarLockWidget = () => {
       onClick={() => setState("login")}
       interactable
     >
-      <button></button>
+      <span className="font-normal"></span>
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarMicrophoneWidget.tsx

@@ -37,7 +37,7 @@ export const WaybarMicrophoneWidget = () => {
         onWheel={handleWheel}
         onClick={handleClick}
       >
-        {icon} {!muted && `${volume}%`}
+        <span className="font-normal">{icon}</span> {!muted && `${volume}%`}
       </span>
     </WaybarWidget>
   );

src/components/Waybar/Widgets/WaybarPowerWidget.tsx

@@ -10,7 +10,7 @@ export const WaybarPowerWidget = () => {
       onClick={() => setState("off")}
       interactable
     >
-      <button></button>
+      <span className="font-normal"></span>
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarRAMWidget.tsx

@@ -33,7 +33,7 @@ export const WaybarRAMWidget = (props: {
       className="px-[0.625rem]"
       tooltip={`Memory - ${used.toFixed(1)}GB used`}
     >
-       {usage}%
+      <span className="font-normal"></span> {usage}%
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarTemperatureWidget.tsx

@@ -26,7 +26,7 @@ export const WaybarTemperatureWidget = (props: {
       className="pl-3 pr-[0.625rem]"
       tooltip="All good until I start playing btd6"
     >
-       {temperature}°C
+      <span className="font-normal"></span> {temperature}°C
     </WaybarWidget>
   );
 };

src/components/Waybar/Widgets/WaybarToggleThemeWidget.tsx

@@ -2,6 +2,6 @@ import { WaybarWidget } from "../WaybarWidget";
 
 export const WaybarToggleThemeWidget = () => (
   <WaybarWidget className="pl-[0.625rem] pr-3" interactable>
-    󰐾
+    <span className="font-normal">󰐾</span>
   </WaybarWidget>
 );

src/components/Waybar/Widgets/WaybarVolumeWidget.tsx

@@ -39,7 +39,7 @@ export const WaybarVolumeWidget = () => {
         onWheel={handleWheel}
         onClick={handleClick}
       >
-        {icon} {!muted && `${volume}%`}
+        <span className="font-normal">{icon}</span> {!muted && `${volume}%`}
       </span>
     </WaybarWidget>
   );

src/index.scss

@@ -13,6 +13,8 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+@import url(https://fonts.bunny.net/css?family=jetbrains-mono:700,800);
+
 body {
   margin: 0;
   font-family: "JetBrains Mono";
@@ -32,26 +34,6 @@ body {
   font-display: swap;
 }
 
-@font-face {
-  font-family: "JetBrainsMono";
-  src:
-    url("/fonts/JetBrainsMonoNF-Bold.woff2") format("woff2"),
-    url("/fonts/JetBrainsMonoNF-Bold.woff") format("woff");
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "JetBrainsMono";
-  src:
-    url("/fonts/JetBrainsMonoNF-ExtraBold.woff2") format("woff2"),
-    url("/fonts/JetBrainsMonoNF-ExtraBold.woff") format("woff");
-  font-weight: 800;
-  font-style: normal;
-  font-display: swap;
-}
-
 .drop-shadow-white:hover {
   filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 1));
 }