Feat: Figured out adding custom fonts and changed the primary font to Roboto

content.svelte

@@ -80,6 +80,7 @@
     }
     return brand
   }
+
   getPokemon()
 </script>
 
@@ -93,12 +94,12 @@
       </div>
       <div class="justify-self-end mr-3 text-2xl flex items-center">
         <button class="mr-1" title="Add url to the list"
-          ><img class="w-7 h-7" src={add} alt="add button" /></button>
+          ><img class="w-6 h-6" src={add} alt="add button" /></button>
         <button title="Close window" on:click={() => closePopup()}
-          ><img class="w-7 h-7" src={exit} alt="add button" /></button>
+          ><img class="w-6 h-6" src={exit} alt="add button" /></button>
       </div>
     </div>
-    <section class="p-2">
+    <section class="p-2 font-roboto">
       <div>
         <p>Brand: <span class="font-bold">{brand}</span></p>
       </div>

font.css

@@ -8,3 +8,13 @@
     U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
     U+FEFF, U+FFFD;
 }
+@font-face {
+  font-family: "Roboto";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(data-base64:~assets/Roboto.woff2) format("woff2");
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
+    U+FEFF, U+FFFD;
+}

style.css

@@ -3,5 +3,9 @@
 @tailwind utilities;
 
 .logo {
-    font-family: "Sacramento";
-}
\ No newline at end of file
+  font-family: "Sacramento";
+}
+
+.font-roboto {
+  font-family: "Roboto";
+}