making the app faster by not using google font, and minify css

Author: Laaouatni

gcode/index.html

@@ -13,11 +13,6 @@
       <!-- <section id="GcodeSnippet">a</section> -->
     </div>
 
-    <style>
-      @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
-      @import url("./src/CSS/main.css");
-    </style>
-
     <script type="module" src="/main.js"></script>
   </body>
 </html>

gcode/main.js

@@ -1,5 +1,7 @@
+import css from "./style.css"
+// import GcodeAPI from "./src/API/GcodeApi/GcodeAPI_main/GcodeAPI.js";
+
 const t0 = performance.now();
-import GcodeAPI from "./src/API/GcodeApi/GcodeAPI_main/GcodeAPI.js";
 
 import G0 from "./src/API/GcodeApi/Gcommands/G/G0.js";
 import Gcss from "./src/API/GcodeApi/Gsimulator/Gcss/Gcss.js";

gcode/src/API/GcodeApi/Gsimulator/Gcss/CssFloatPopup/other/Methods/getPopupSpanHtml/getPopupSpanHtml.js

@@ -1,6 +1,6 @@
 export default function getPopupSpanHtml(_this) {
   return `
-  <div style="display: flex; align-items: center; gap: 1rem; width: min-content; font-family: poppins;">
+  <div style="display: flex; align-items: center; gap: 1rem; width: min-content; font-family: poppins, system-ui;">
     <div>
       <div style="display: flex; align-items: center; font-size: 1rem; gap: 0.5rem;">
         <div style="font-size: 1rem; font-weight: bold;">X</div>
@@ -35,7 +35,7 @@ export default function getPopupSpanHtml(_this) {
       </div>
 
       <div style="display: flex; align-items: center; font-size: 1rem; gap: 0.5rem;">
-        <div style="font-size: 1rem; font-weight: bold;">ANGLE&nbsp;&nbsp;&nbsp;</div>
+        <div style="font-size: 1rem; font-weight: bold;">ANGLE&nbsp;&nbsp;</div>
         <div style="display: flex; align-items: baseline;">
           <div>${JSON.parse(_this.button.dataset.line).angle.split(".")[0]}</div>
           <div style="font-size: 0.7rem;">.${

gcode/src/CSS/FloatingUI/tooltip/tooltip.css

@@ -1,12 +1,12 @@
 #tooltip {
   padding: 0.5rem;
   font-size: 1rem;
-  font-family: poppins;
+  font-family: poppins, system-ui;
 }
 
 #tooltip {
   border: 0.1rem solid var(--sky-200);
   background-color: var(--sky-50);
   border-radius: 0.5rem;
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
-}
+}

gcode/src/CSS/demo/btn.css

@@ -1,6 +1,6 @@
 #btn {
   font-size: 5vw;
-  font-family: poppins;
+  font-family: poppins, system-ui;
   padding: 2vw 4vw;
   background-color: var(--sky-50);
   border: none;
@@ -10,11 +10,10 @@
 }
 
 #btn:not(:disabled):hover {
-  box-shadow: inset 0 1vw 6vw var(--sky-200),
-    0 1vw 5vw rgba(0, 0, 0, 0.2);
+  box-shadow: inset 0 1vw 6vw var(--sky-200), 0 1vw 5vw rgba(0, 0, 0, 0.2);
   transform: scale(1.5) rotate(5deg);
 }
 
 #btn:disabled {
   display: none;
-}
+}

gcode/style.css

@@ -0,0 +1 @@
+@import url("./src/CSS/main.css");