feat: integrate Astro fonts API with Google Sans Code font (#602)

- Add Google Sans Code font and make it the default font
- Font is preloaded with latin subset and weight 400 and style normal for optimal performance
- Add font configuration section in how to config docs

src/styles/global.css

@@ -21,6 +21,7 @@ html[data-theme="dark"] {
 }
 
 @theme inline {
+  --font-app: var(--font-google-sans-code);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-accent: var(--accent);
@@ -38,7 +39,7 @@ html[data-theme="dark"] {
     @apply overflow-y-scroll scroll-smooth;
   }
   body {
-    @apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
+    @apply flex min-h-svh flex-col bg-background font-app text-foreground selection:bg-accent/75 selection:text-background;
   }
   a,
   button {
@@ -59,7 +60,7 @@ html[data-theme="dark"] {
 }
 
 .active-nav {
-  @apply underline decoration-wavy decoration-2 underline-offset-4;
+  @apply underline decoration-wavy decoration-2 underline-offset-8;
 }
 
 /* Source: https://piccalil.li/blog/a-more-modern-css-reset/ */