Not preloading fonts

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@firq/fgosite",
 	"type": "module",
-	"version": "0.2.0-pre.18",
+	"version": "0.2.0-pre.19",
 	"private": true,
 	"scripts": {
 		"dev": "astro dev",

serve.json

@@ -22,7 +22,7 @@
       "headers": [
         {
           "key": "Cache-Control",
-          "value": "no-cache"
+          "value" : "max-age=31536000"
         }
       ]
     },

src/components/cards/contactCard.astro

@@ -25,7 +25,7 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
   aria-label=`${site} - new window`
 >
   <article class="contact do-hover">
-    <Image src={loadedLogoImage} alt={logoAltText} loading={'eager'} width={100} height={100} quality={100}/>
+    <Image src={loadedLogoImage} alt="" loading={'eager'} width={150} height={150} quality={100}/>
     <div>
       <h2>{site}</h2>
     </div>

src/components/fgotaHero.astro

@@ -1,5 +1,5 @@
 ---
-import '@fontsource/work-sans/500.css'
+import '@fontsource-variable/work-sans';
 
 export interface Props {
   fadeout?: boolean

src/components/titles/smallTitle.astro

@@ -1,6 +1,6 @@
 ---
-import '@fontsource/work-sans/700.css'
+import '@fontsource-variable/work-sans';
-import '@fontsource/work-sans/500.css'
+
 export interface Props {
   maintext: string
   subtext: string
@@ -69,11 +69,11 @@ const displayBackButton = returnbutton ? "": "display: none"
   }
 
   .sub {
+    margin-top: 0.5em;
     font-size: 0.75rem;
     font-weight: 500;
     font-family: 'Work Sans', 'Helvetica Neue', Helvetica, Helvetica, Arial,
       sans-serif;
-    margin-top: 0.5em;
   }
 
   .head {

src/components/titles/title.astro

@@ -1,6 +1,5 @@
 ---
-import '@fontsource/work-sans/700.css'
+import '@fontsource-variable/work-sans';
-import '@fontsource/work-sans/500.css'
 ---
 
 <div class="wrap">

src/layouts/Layout.astro

@@ -10,10 +10,6 @@ import ta_collection from 'iconoir/icons/database.svg'
 import blog from 'iconoir/icons/bookmark-book.svg'
 import about from 'iconoir/icons/mail.svg'
 
-import workSans500 from '@fontsource/work-sans/files/work-sans-latin-500-normal.woff2?url';
-import workSans600 from '@fontsource/work-sans/files/work-sans-latin-600-normal.woff2?url';
-import workSans700 from '@fontsource/work-sans/files/work-sans-latin-700-normal.woff2?url';
-
 export interface Props {
   title: string
   currentpage: string
@@ -75,9 +71,6 @@ const mapped_navdata = navdata.map((item) => ({
     <!-- Disable DarkReader, as site is already in dark mode -->
     <meta name="darkreader-lock" content="this site only has darkmode"> 
     <!-- Links -->
-    <link rel="preload" as="font" type="font/woff2" href={workSans500} crossorigin="anonymous" />
-    <link rel="preload" as="font" type="font/woff2" href={workSans600} crossorigin="anonymous" />
-    <link rel="preload" as="font" type="font/woff2" href={workSans700} crossorigin="anonymous" />
     <link rel="icon" type="image/ico" href="/favicon.ico" />
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link href="https://mastodon.neshweb.net/@Firq" rel="me" />

src/pages/404.astro

@@ -1,6 +1,5 @@
 ---
-import '@fontsource/work-sans/500.css'
+import '@fontsource-variable/work-sans';
-import '@fontsource/work-sans/600.css'
 import { Image } from 'astro:assets'
 import Layout from '../layouts/Layout.astro'
 import sadshishou from '../assets/shishousad.webp'