fix: Move fira code to header

Author: pomianowski

src/layouts/BaseLayout.astro

@@ -19,6 +19,11 @@ const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL :
     <link rel="alternate icon" type="image/x-icon" href={`${base}favicon.ico`} />
     <meta name="generator" content={Astro.generator} />
 
+    <!-- Preload and load Fira Code font optimally -->
+    <link rel="preconnect" href="https://cdn.staticdelivr.com" crossorigin />
+    <link rel="preload" href="https://cdn.staticdelivr.com/gfonts/css2?family=Fira+Code:wght@300..700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
+    <noscript><link rel="stylesheet" href="https://cdn.staticdelivr.com/gfonts/css2?family=Fira+Code:wght@300..700&display=swap" /></noscript>
+    
     <title>{title}</title>
     <meta name="description" content={description} />
     <link rel="canonical" href={canonicalURL} />

src/styles/terminal.css

@@ -1,5 +1,4 @@
-/* Fira Code: https://github.com/tonsky/FiraCode */
-@import url('https://cdn.staticdelivr.com/gfonts/css2?family=Fira+Code:wght@300..700&display=swap');
+/* Fira Code font is loaded in HTML head for better performance */
 
 :root {
   /* Light mode by default */