Not preloading fonts

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/work-sans/500.css'
+import '@fontsource-variable/work-sans';
+
 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/work-sans/500.css'
+import '@fontsource-variable/work-sans';
 ---
 
 <div class="wrap">