LCP fixes

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@firq/fgosite",
-	"version": "0.2.0-pre.107",
+	"version": "0.2.0-pre.108",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@firq/fgosite",
-			"version": "0.2.0-pre.107",
+			"version": "0.2.0-pre.108",
 			"dependencies": {
 				"@astro-community/astro-embed-youtube": "^0.5.6",
 				"@astrojs/check": "^0.9.4",

package.json

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

src/components/titles/smallTitle.astro

@@ -65,16 +65,18 @@ const text = buttontext || baseurl
     padding-top: 2rem;
     font-size: 3.25rem;
     font-weight: 700;
-    font-family: 'Work Sans Variable', system-ui, 'Segoe UI', sans-serif;
+    font-family: 'Work Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
     font-size-adjust: 0.52;
+    line-height: 1.4;
   }
 
   .sub {
     margin: 0 .5rem;
     font-size: 0.9rem;
     font-weight: 500;
-    font-family: 'Work Sans Variable', system-ui, 'Segoe UI', sans-serif;
+    font-family: 'Work Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
     font-size-adjust: 0.52;
+    line-height: 1.4;
   }
 
   .head {

src/components/titles/title.astro

@@ -34,16 +34,18 @@ import LinkContainer from "../links/linkContainer.astro";
     padding-top: 2rem;
     font-size: 3rem;
     font-weight: 700;
-    font-family: 'Work Sans Variable', system-ui, 'Segoe UI', sans-serif;
+    font-family: 'Work Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
     font-size-adjust: 0.52;
+    line-height: 1.4;
     min-height: 4.8rem;
   }
 
   .sub {
     font-size: 1rem;
     font-weight: 400;
-    font-family: 'Work Sans Variable', system-ui, 'Segoe UI', sans-serif;
+    font-family: 'Work Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
     font-size-adjust: 0.52;
+    line-height: 1.4;
     width: 97.5%;
     min-height: 1.5rem;
   }

src/layouts/Layout.astro

@@ -1,6 +1,6 @@
 ---
 import '@fontsource-variable/work-sans'
-import workSans from '@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2'
+import workSans from '@fontsource-variable/work-sans/files/work-sans-latin-wght-normal.woff2?url'
 
 import Navbar from '@components/navbar/navbar.astro'
 import NavbarEntry from '@components/navbar/navbarEntry.astro'
@@ -113,15 +113,7 @@ const mapped_navdata = navdata.map((item) => ({
   </body>
 </html>
 
-<style is:global define:vars={{ workSans }}>
+<style is:global>
-  @font-face {
-    font-family: 'Work Sans Variable';
-    src: var(--workSans) format('woff2');
-    font-display: swap;
-    font-weight: 100 900;
-    font-style: normal;
-  }
-
   :root {
     /* Animations */
     --a-time-default: 200ms;
@@ -152,6 +144,8 @@ const mapped_navdata = navdata.map((item) => ({
 
     /* Scrollbar */
     scrollbar-color: var(--c-secondary-background) var(--c-primary-background);
+
+    /* Font Size Adjusting to prevent LCP issue */
   }
 
   body {

src/layouts/contactSection.astro

@@ -19,7 +19,7 @@ const { title } = Astro.props
     font-size: 24px;
     font-weight: 700;
     line-height: 32px;
-    font-family: 'Work Sans Adaptive', sans-serif;
+    font-family: 'Work Sans Variable', sans-serif;
     width: max-content;
     margin: 0 auto 0.5rem;
     &:after {